android布局练习

实现效果：

整理思路：

1、控件：文字TextView 和 右箭头ImageView

2、因为考虑到点击效果，设计为：最外层为全圆角，内层有四种情况，分别为上圆角、无圆角、下圆角和全圆角。

3、内层样式效果：需要初始样式、和点击样式

4、需要知识：结合style、shake、selector组合样式

布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#F0F3F6"
     >

    
    <LinearLayout style="@style/wrap_layout" >
        <!-- 上圆角-->
        <LinearLayout style="@style/top_layout">
            <TextView style="@style/usertext" android:text="个性签名" />
              <ImageView style="@style/img_arrow"/>
        </LinearLayout>
        
        <!-- 分割线 -->
          <View style="@style/bg_line"/>
          <!-- 无圆角-->
       <LinearLayout style="@style/mid_layout">
            <TextView style="@style/usertext" android:text="我的资料" />
              <ImageView style="@style/img_arrow"/>
        </LinearLayout>
             <View style="@style/bg_line"/>
          <!-- 下圆角-->
       <LinearLayout style="@style/bottom_layout">
            <TextView style="@style/usertext" android:text="消息通知" />
              <ImageView style="@style/img_arrow"/>
        </LinearLayout>
             
    </LinearLayout>

    
     <!-- 全圆角-->
    <LinearLayout style="@style/wrap_layout">
        <LinearLayout style="@style/single_layout">
            <TextView style="@style/usertext" android:text="辅助功能"/>
            <ImageView style="@style/img_arrow"/>
        </LinearLayout>
        
    </LinearLayout>
    
</LinearLayout>

布局文件

　　样式：

<!-- 最外层样式 -->
    <style name="wrap_layout">
        <item name="android:orientation">vertical</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_marginLeft">8dp</item>
        <item name="android:layout_marginRight">8dp</item>
        <item name="android:layout_marginTop">8dp</item>
        <item name="android:padding">1px</item>
        <item name="android:background">@drawable/bg_layout_shape</item>
              
    </style>

    <!-- 共用层样式 -->
    <style name="base_layout">
        <item name="android:orientation">horizontal</item> 
         <item name="android:layout_width">match_parent</item>       
         <item name="android:layout_height">wrap_content</item>
         <item name="android:paddingTop">16dp</item>
         <item name="android:paddingBottom">16dp</item>
         <item name="android:paddingLeft">12dp</item>
         <item name="android:paddingRight">12dp</item>
        <item name="android:gravity">center_vertical</item>   
         <item name="android:focusable">true</item>  
        <item name="android:clickable">true</item>       
    </style>

layout样式

　　

<!-- textview样式 -->
    <style name="usertext">
        <item name="android:textSize">16dp</item>
        <item name="android:textColor">@color/text_clo</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">1</item>
    </style>
    
    
    <!-- 文本右边箭头样式 -->
    <style name="img_arrow">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:src">@drawable/setting_arrow</item>
        
    </style>
    
    
   <!-- view分割线样式 -->
    <style name="bg_line">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">1px</item>
        <item name="android:background">@color/border_clo</item>
    </style>

控件样式

　　

<!-- 上圆角样式 -->    
    <style name="top_layout" parent="base_layout">        
        <item name="android:background">@drawable/top_layout_selector</item>
    </style>
    
    
    <!--无圆角样式  -->
    <style name="mid_layout" parent="base_layout">
         <item name="android:background">@drawable/mid_layout_selector</item>
    </style>
    
        <!-- 下圆角样式 -->
    <style name="bottom_layout"  parent="base_layout">
          <item name="android:background">@drawable/bottom_layout_selector</item>
    </style>
    
    <!-- 全圆角样式 -->
    <style name="single_layout" parent="base_layout">
        <item name="android:background">@drawable/single_layout_selector</item>
    </style>

点击样式和默认样式

　　其中举例上圆角的背景设置为：

1 <?xml version="1.0" encoding="utf-8"?>
2 <selector xmlns:android="http://schemas.android.com/apk/res/android" >
3     <item android:state_pressed="true" android:drawable="@drawable/top_select"></item>
4     <item android:state_focused="true" android:drawable="@drawable/top_select"></item>
5     <item android:drawable="@drawable/top_unselect"></item>
6 </selector>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="@color/blue"/>
    <corners android:topRightRadius="8dp" android:topLeftRadius="8dp"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="@color/white"/>
    <corners android:topRightRadius="8dp" android:topLeftRadius="8dp"/>
</shape>

练习工程下载