2017-07-14 105 views
0

我想围绕我的Android登录框做一个框架。 下面是两个图像,说明我有什么,什么我要找:围绕登录框的框架

enter image description here enter image description here

我login.xml文件:

<?xml version="1.0" encoding="utf-8"?> 
<ScrollView 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:fitsSystemWindows="true"> 

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
     android:orientation="vertical" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <!-- Logo --> 
     <ImageView 
      android:id="@+id/imageViewLogo" 
      android:layout_width="wrap_content" 
      android:layout_height="72dp" 
      android:layout_gravity="center_horizontal" 
      android:layout_marginBottom="24dp" 
      android:layout_marginTop="24dp" 
      android:src="@drawable/logo" /> 
     <!-- //Logo --> 

     <!-- Login form --> 
     <TableLayout 
      android:id="@+id/tableLayoutFrame" 
      android:background="@color/colorGray" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center_horizontal"> 
      <TableRow 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center_horizontal"> 
       <TableLayout 
        android:id="@+id/tableLayoutLogin" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center_horizontal"> 

        <!-- Email --> 
        <TableRow 
         android:layout_width="match_parent" 
         android:layout_height="match_parent" 
         android:layout_marginLeft="12dp" 
         android:layout_marginRight="12dp" 
         android:layout_marginTop="12dp" 
         android:background="@color/colorWhite"> 

         <ImageView 
          android:id="@+id/imageViewEmail" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_marginEnd="6dp" 
          android:layout_marginTop="12dp" 
          android:src="@drawable/ic_mail_outline_black" /> 

         <EditText 
          android:id="@+id/editTextEmail" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_gravity="center_horizontal" 
          android:ems="10" 
          android:inputType="textEmailAddress" 
          android:text="@string/blank" /> 
        </TableRow> 
        <!-- // Email --> 

        <!-- Password --> 
        <TableRow 
         android:layout_width="match_parent" 
         android:layout_height="match_parent" 
         android:layout_marginLeft="12dp" 
         android:layout_marginRight="12dp" 
         android:layout_marginTop="12dp" 
         android:background="@color/colorWhite"> 

         <ImageView 
          android:id="@+id/imageViewPassword" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_marginEnd="6dp" 
          android:layout_marginTop="12dp" 
          android:src="@drawable/ic_lock_black" /> 

         <EditText 
          android:id="@+id/editTextPassword" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_gravity="center_horizontal" 
          android:ems="10" 
          android:inputType="textWebPassword" /> 

        </TableRow> 
        <!-- //Password --> 

        <!-- Login button --> 
        <TableRow 
         android:layout_width="match_parent" 
         android:layout_height="match_parent" 
         android:layout_marginLeft="12dp" 
         android:layout_marginRight="12dp" 
         android:layout_marginTop="8dp"> 

         <Button 
          android:id="@+id/buttonLogin" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_span="2" 
          android:background="@drawable/btn_primary" 
          android:text="@string/login" 
          android:textAllCaps="false" 
          android:textAppearance="?android:attr/textAppearanceMedium" 
          android:textColor="@color/colorWhite" /> 

        </TableRow> 
        <!-- //Login button --> 

        <!-- Forgot password --> 
        <TableRow 
         android:layout_width="match_parent" 
         android:layout_height="match_parent" 
         android:layout_marginBottom="12dp" 
         android:layout_marginLeft="12dp" 
         android:layout_marginRight="12dp" 
         android:layout_marginTop="8dp"> 


         <TextView 
          android:id="@+id/textViewForgotPassword" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_span="2" 
          android:layout_gravity="center_horizontal" 
          android:text="@string/forgot_password_question_mark" /> 
        </TableRow> 
        <!-- //Forgot password --> 

       </TableLayout> 
      </TableRow> 
     </TableLayout> 
     <!-- //Login form --> 

     <!-- New user --> 
     <Button 
      android:id="@+id/buttonSignUp" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="22dp" 
      android:textAllCaps="false" 
      android:text="@string/new_user_sign_up" /> 
     <!-- //New user --> 
    </LinearLayout> 
</ScrollView> 

是否有可能使灰框填充设计的水平部分? Maby我根本不需要使用表格布局?

回答

1

您可以定义的LinearLayout之前TableLayout设置颜色属性,尝试上面的代码

<?xml version="1.0" encoding="utf-8"?> 

<ScrollView 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
android:fitsSystemWindows="true"> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:orientation="vertical" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content"> 

    <!-- Logo --> 
    <ImageView 
     android:id="@+id/imageViewLogo" 
     android:layout_width="wrap_content" 
     android:layout_height="72dp" 
     android:layout_gravity="center_horizontal" 
     android:layout_marginBottom="24dp" 
     android:layout_marginTop="24dp" 
     android:src="@drawable/logo" /> 
    <!-- //Logo --> 

    <!-- Login form --> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:orientation="vertical" 
     android:background="@color/colorGray"> 
    <TableLayout 
     android:id="@+id/tableLayoutFrame" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center_horizontal"> 
     <TableRow 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center_horizontal"> 
      <TableLayout 
       android:id="@+id/tableLayoutLogin" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center_horizontal"> 

       <!-- Email --> 
       <TableRow 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:layout_marginLeft="12dp" 
        android:layout_marginRight="12dp" 
        android:layout_marginTop="12dp" 
        android:background="@color/colorWhite"> 

        <ImageView 
         android:id="@+id/imageViewEmail" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_marginEnd="6dp" 
         android:layout_marginTop="12dp" 
         android:src="@drawable/ic_mail_outline_black" /> 

        <EditText 
         android:id="@+id/editTextEmail" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_gravity="center_horizontal" 
         android:ems="10" 
         android:inputType="textEmailAddress" 
         android:text="@string/blank" /> 
       </TableRow> 
       <!-- // Email --> 

       <!-- Password --> 
       <TableRow 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:layout_marginLeft="12dp" 
        android:layout_marginRight="12dp" 
        android:layout_marginTop="12dp" 
        android:background="@color/colorWhite"> 

        <ImageView 
         android:id="@+id/imageViewPassword" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_marginEnd="6dp" 
         android:layout_marginTop="12dp" 
         android:src="@drawable/ic_lock_black" /> 

        <EditText 
         android:id="@+id/editTextPassword" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_gravity="center_horizontal" 
         android:ems="10" 
         android:inputType="textWebPassword" /> 

       </TableRow> 
       <!-- //Password --> 

       <!-- Login button --> 
       <TableRow 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:layout_marginLeft="12dp" 
        android:layout_marginRight="12dp" 
        android:layout_marginTop="8dp"> 

        <Button 
         android:id="@+id/buttonLogin" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_span="2" 
         android:background="@drawable/btn_primary" 
         android:text="@string/login" 
         android:textAllCaps="false" 
         android:textAppearance="?android:attr/textAppearanceMedium" 
         android:textColor="@color/colorWhite" /> 

       </TableRow> 
       <!-- //Login button --> 

       <!-- Forgot password --> 
       <TableRow 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:layout_marginBottom="12dp" 
        android:layout_marginLeft="12dp" 
        android:layout_marginRight="12dp" 
        android:layout_marginTop="8dp"> 


        <TextView 
         android:id="@+id/textViewForgotPassword" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_span="2" 
         android:layout_gravity="center_horizontal" 
         android:text="@string/forgot_password_question_mark" /> 
       </TableRow> 
       <!-- //Forgot password --> 

      </TableLayout> 
     </TableRow> 
    </TableLayout> 

    </LinearLayout> 

    <!-- //Login form --> 

    <!-- New user --> 
    <Button 
     android:id="@+id/buttonSignUp" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="22dp" 
     android:textAllCaps="false" 
     android:text="@string/new_user_sign_up" /> 
    <!-- //New user --> 
</LinearLayout> 

0

为表格布局添加左右边距以减少灰色部分。然后相应地调整编辑文本的边距。

0

集的TableLayout的layout_width到match_parent:

<TableLayout 
     android:id="@+id/tableLayoutFrame" 
     android:background="@color/colorGray" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center_horizontal">