Android:仿微信设置菜单

在Android应用开发中,应用设置界面是非常重要的()。如何设计一个好看的设置界面也很重要。于是在网上搜索一番,自己写写。

        1.第一种方法:CornerListView

使用CornerListView的方法是,在布局中创建一个CornerListView。然后使用代码添加item,每个选项的布局使用另一个布局文件设置。

列表布局文件main_tab_setting.xml:

 

[html] view plaincopyprint?

  1. <?xml version=”1.0″ encoding=”utf-8″?>
  2. <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
  3.     android:orientation=”vertical”
  4.     android:layout_width=”fill_parent”
  5.     android:layout_height=”fill_parent”>
  6.     <com.tianxia.app.floworld.view.CornerListView android:id=”@+id/setting_list”
  7.         android:layout_width=”fill_parent”
  8.         android:layout_height=”wrap_content”
  9.         android:layout_margin=”10dip”
  10.         android:background=”@drawable/app_list_corner_border”
  11.         android:cacheColorHint=”#00000000″>
  12.     </com.tianxia.app.floworld.view.CornerListView>
  13. </LinearLayout>

列表项布局文件main_tab_setting_list_item.xml:

 

 

[html] view plaincopyprint?

  1. <?xml version=”1.0″ encoding=”utf-8″?>
  2. <RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
  3.     android:layout_width=”fill_parent”
  4.     android:layout_height=”fill_parent”>
  5.     <ImageView android:id=”@+id/setting_list_item_arrow”
  6.         android:layout_alignParentRight=”true”
  7.         android:layout_centerVertical=”true”
  8.         android:layout_width=”wrap_content”
  9.         android:layout_height=”fill_parent”
  10.         android:layout_marginLeft=”15dip”
  11.         android:layout_marginRight=”15dip”
  12.         android:src=”@drawable/appreciate_tab_list_item_arrow_small”/>
  13.     <TextView  android:id=”@+id/setting_list_item_text”
  14.         android:layout_toLeftOf=”@id/setting_list_item_arrow”
  15.         android:layout_width=”fill_parent”
  16.         android:layout_height=”wrap_content”
  17.         android:textSize=”16dip”
  18.         android:textColor=”#000000″
  19.         android:paddingTop=”10dip”
  20.         android:paddingBottom=”10dip”
  21.         android:paddingLeft=”10dip” />
  22. </RelativeLayout>

显示界面SettingTabActivity.java:

 

 

[html] view plaincopyprint?

  1. public class SettingTabActivity extends Activity{
  2.     private CornerListView cornerListView = null;
  3.     private List<Map<String,String>> listData = null;
  4.     private SimpleAdapter adapter = null;
  5.     @Override
  6.     protected void onCreate(Bundle savedInstanceState) {
  7.         super.onCreate(savedInstanceState);
  8.         setContentView(R.layout.main_tab_setting);
  9.         cornerListView = (CornerListView)findViewById(R.id.setting_list);
  10.         setListData();
  11.         adapter = new SimpleAdapter(getApplicationContext(), listData, R.layout.main_tab_setting_list_item , new String[]{“text”}, new int[]{R.id.setting_list_item_text});
  12.         cornerListView.setAdapter(adapter);
  13.     }
  14.     /**
  15.      * 设置列表数据
  16.      */
  17.     private void setListData(){
  18.         listData = new ArrayList<Map<String,String>>();
  19.         Map<String,String> map = new HashMap<String, String>();
  20.         map.put(“text”, “图库更新”);
  21.         listData.add(map);
  22.         map = new HashMap<String, String>();
  23.         map.put(“text”, “收藏图片”);
  24.         listData.add(map);
  25.         map = new HashMap<String, String>();
  26.         map.put(“text”, “下载目录”);
  27.         listData.add(map);
  28.     }
  29. }<span style=”font-family: ‘Microsoft YaHei’;”>        </span>

使用这种方法界面效果图如下:

使用CornerListView要注意的事项:当列表太多需要滚动时,要注意scrollview与listview共存问题。这个问题的解决方法在我前一篇博文:Android:scrollview与listview共存中已经说到并提供了解决方法。而且如果使用这种做法,假设在代码中药更改item相对麻烦一点。

       2.使用背景layout组合布局

创建四种圆角选项:单独选项、第一个选项、中间选项和最后一个选项。

第一个选项布局:

 

[html] view plaincopyprint?

  1. <?xml version=”1.0″ encoding=”UTF-8″?>
  2. <selector
  3.   xmlns:android=”http://schemas.android.com/apk/res/android”>
  4.     <item android:state_enabled=”true” android:state_selected=”true” android:drawable=”@drawable/ic_preference_first_pressed” />
  5.     <item android:state_enabled=”true” android:state_pressed=”true” android:drawable=”@drawable/ic_preference_first_pressed” />
  6.     <item android:drawable=”@drawable/ic_preference_first_normal” />
  7. </selector>

中间选项布局:

 

 

[html] view plaincopyprint?

  1. <?xml version=”1.0″ encoding=”UTF-8″?>
  2. <selector
  3.   xmlns:android=”http://schemas.android.com/apk/res/android”>
  4.     <item android:state_enabled=”true” android:state_selected=”true” android:drawable=”@drawable/ic_preference_pressed” />
  5.     <item android:state_enabled=”true” android:state_pressed=”true” android:drawable=”@drawable/ic_preference_pressed” />
  6.     <item android:drawable=”@drawable/ic_preference_normal” />
  7. </selector>

最后一个选项:

[html] view plaincopyprint?

  1. <?xml version=”1.0″ encoding=”UTF-8″?>
  2. <selector
  3.   xmlns:android=”http://schemas.android.com/apk/res/android”>
  4.     <item android:state_enabled=”true” android:state_selected=”true” android:drawable=”@drawable/ic_preference_last_pressed” />
  5.     <item android:state_enabled=”true” android:state_pressed=”true” android:drawable=”@drawable/ic_preference_last_pressed” />
  6.     <item android:drawable=”@drawable/ic_preference_last_normal” />
  7. </selector>

单独选项:

 

 

[html] view plaincopyprint?

  1. <?xml version=”1.0″ encoding=”UTF-8″?>
  2. <selector
  3.   xmlns:android=”http://schemas.android.com/apk/res/android”>
  4.     <item android:state_enabled=”true” android:state_selected=”true” android:drawable=”@drawable/ic_preference_single_pressed” />
  5.     <item android:state_enabled=”true” android:state_pressed=”true” android:drawable=”@drawable/ic_preference_single_pressed” />
  6.     <item android:drawable=”@drawable/ic_preference_single_normal” />
  7. </selector>

整体布局文件:

 

 

[html] view plaincopyprint?

  1. <?xml version=”1.0″ encoding=”utf-8″?>
  2.     <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
  3.         android:layout_width=”fill_parent”
  4.         android:layout_height=”fill_parent”
  5.         android:background=”#eee”
  6.         android:orientation=”vertical” >
  7.         <LinearLayout
  8.             android:layout_width=”fill_parent”
  9.             android:layout_height=”45dp”
  10.             android:id=”@+id/title”
  11.             android:background=”@drawable/title_bar”
  12.             android:gravity=”center_horizontal|center_vertical”>
  13.             <TextView
  14.                 android:layout_width=”wrap_content”
  15.                 android:layout_height=”wrap_content”
  16.                 android:text=”设置”
  17.                 android:textSize=”20sp”
  18.                 android:textColor=”#ffffff” />
  19.         </LinearLayout>
  20.         <ScrollView
  21.             android:layout_width=”fill_parent”
  22.             android:layout_height=”fill_parent”
  23.             android:scrollbarStyle=”outsideOverlay”
  24.              >
  25.             <LinearLayout
  26.                 android:layout_width=”fill_parent”
  27.                 android:layout_height=”wrap_content”
  28.                 android:orientation=”vertical” >
  29.                 <!–   ***********************************************************************   –>
  30.                 <RelativeLayout
  31.                         android:id=”@+id/SrelativeLayoutT”
  32.                         android:layout_width=”fill_parent”
  33.                         android:layout_height=”wrap_content”
  34.                         android:gravity=”center_vertical”
  35.                         android:clickable=”true”
  36.                          >
  37.                         <TextView
  38.                             android:id=”@+id/StxtViewT”
  39.                             android:layout_width=”wrap_content”
  40.                             android:layout_height=”wrap_content”
  41.                             android:padding=”2dp”
  42.                             android:text=””
  43.                             android:textSize=”2sp”
  44.                             android:textColor=”#000″ />
  45.                 </RelativeLayout>
  46.                 <!–   ***********************************************************************   –>
  47.                 <RelativeLayout
  48.                     android:id=”@+id/SrelativeLayout1″
  49.                     android:layout_width=”fill_parent”
  50.                     android:layout_height=”wrap_content”
  51.                     android:gravity=”center_vertical”
  52.                     android:clickable=”true”
  53.                     android:background=”@drawable/preference_single_item” >
  54.                     <TextView
  55.                         android:id=”@+id/StxtView1″
  56.                         android:layout_width=”wrap_content”
  57.                         android:layout_height=”wrap_content”
  58.                         android:padding=”8dp”
  59.                         android:text=”名片”
  60.                         android:textSize=”20sp”
  61.                         android:textColor=”#000″ />
  62.                     <ImageView
  63.                         android:id=”@+id/SimageView1″
  64.                         android:layout_width=”wrap_content”
  65.                         android:layout_height=”wrap_content”
  66.                         android:scaleType=”matrix”
  67.                         android:layout_centerVertical=”true”
  68.                         android:layout_alignParentRight=”true”
  69.                         android:src=”@drawable/mm_submenu” />
  70.                 </RelativeLayout>
  71.                 <!–   ***********************************************************************   –>
  72.                 <RelativeLayout
  73.                     android:id=”@+id/SrelativeLayout2″
  74.                     android:layout_width=”fill_parent”
  75.                     android:layout_height=”wrap_content”
  76.                     android:layout_marginTop=”14dp”
  77.                     android:gravity=”center_vertical”
  78.                     android:clickable=”true”
  79.                     android:background=”@drawable/preference_first_item” >
  80.                     <TextView
  81.                         android:id=”@+id/StxtView2″
  82.                         android:layout_width=”wrap_content”
  83.                         android:layout_height=”wrap_content”
  84.                         android:padding=”8dp”
  85.                         android:text=”背景”
  86.                         android:textSize=”20sp”
  87.                         android:textColor=”#000″ />
  88.                     <ImageView
  89.                         android:id=”@+id/SimageView2″
  90.                         android:layout_width=”wrap_content”
  91.                         android:layout_height=”wrap_content”
  92.                         android:scaleType=”matrix”
  93.                         android:layout_centerVertical=”true”
  94.                         android:layout_alignParentRight=”true”
  95.                         android:src=”@drawable/mm_submenu” />
  96.                 </RelativeLayout>
  97.                 <RelativeLayout
  98.                     android:id=”@+id/SrelativeLayout3″
  99.                     android:layout_width=”fill_parent”
  100.                     android:layout_height=”wrap_content”
  101.                     android:gravity=”center_vertical”
  102.                     android:clickable=”true”
  103.                     android:background=”@drawable/preference_last_item” >
  104.                     <TextView
  105.                         android:id=”@+id/StxtView3″
  106.                         android:layout_width=”wrap_content”
  107.                         android:layout_height=”wrap_content”
  108.                         android:padding=”8dp”
  109.                         android:text=”字体大小”
  110.                         android:textSize=”20sp”
  111.                         android:textColor=”#000″ />
  112.                     <ImageView
  113.                         android:id=”@+id/SimageView3″
  114.                         android:layout_width=”wrap_content”
  115.                         android:layout_height=”wrap_content”
  116.                         android:scaleType=”matrix”
  117.                         android:layout_centerVertical=”true”
  118.                         android:layout_alignParentRight=”true”
  119.                         android:src=”@drawable/mm_submenu” />
  120.                 </RelativeLayout>
  121.                 <!–   ***********************************************************************   –>
  122.                 <RelativeLayout
  123.                     android:id=”@+id/SrelativeLayout4″
  124.                     android:layout_width=”fill_parent”
  125.                     android:layout_height=”wrap_content”
  126.                     android:layout_marginTop=”14dp”
  127.                     android:gravity=”center_vertical”
  128.                     android:clickable=”true”
  129.                     android:background=”@drawable/preference_first_item” >
  130.                     <TextView
  131.                         android:id=”@+id/StxtView4″
  132.                         android:layout_width=”wrap_content”
  133.                         android:layout_height=”wrap_content”
  134.                         android:padding=”8dp”
  135.                         android:text=”听筒播放”
  136.                         android:textSize=”20sp”
  137.                         android:textColor=”#000″ />
  138.                     <ImageView
  139.                         android:id=”@+id/SimageView4″
  140.                         android:layout_width=”wrap_content”
  141.                         android:layout_height=”wrap_content”
  142.                         android:scaleType=”matrix”
  143.                         android:layout_centerVertical=”true”
  144.                         android:layout_alignParentRight=”true”
  145.                         android:src=”@drawable/brand_unsetting_icon” />
  146.                 </RelativeLayout>
  147.                 <RelativeLayout
  148.                     android:id=”@+id/SrelativeLayout5″
  149.                     android:layout_width=”fill_parent”
  150.                     android:layout_height=”wrap_content”
  151.                     android:gravity=”center_vertical”
  152.                     android:clickable=”true”
  153.                     android:background=”@drawable/preference_last_item” >
  154.                     <TextView
  155.                         android:id=”@+id/StxtView5″
  156.                         android:layout_width=”wrap_content”
  157.                         android:layout_height=”wrap_content”
  158.                         android:padding=”8dp”
  159.                         android:text=”自动播放”
  160.                         android:textSize=”20sp”
  161.                         android:textColor=”#000″ />
  162.                     <ImageView
  163.                         android:id=”@+id/SimageView5″
  164.                         android:layout_width=”wrap_content”
  165.                         android:layout_height=”wrap_content”
  166.                         android:scaleType=”matrix”
  167.                         android:layout_centerVertical=”true”
  168.                         android:layout_alignParentRight=”true”
  169.                         android:src=”@drawable/brand_unsetting_icon” />
  170.                 </RelativeLayout>
  171.                 <!–   ***********************************************************************   –>
  172.                 <RelativeLayout
  173.                     android:id=”@+id/SrelativeLayout6″
  174.                     android:layout_width=”fill_parent”
  175.                     android:layout_height=”wrap_content”
  176.                     android:layout_marginTop=”14dp”
  177.                     android:gravity=”center_vertical”
  178.                     android:clickable=”true”
  179.                     android:background=”@drawable/preference_single_item” >
  180.                     <TextView
  181.                         android:id=”@+id/StxtView6″
  182.                         android:layout_width=”wrap_content”
  183.                         android:layout_height=”wrap_content”
  184.                         android:padding=”8dp”
  185.                         android:text=”隐私设置”
  186.                         android:textSize=”20sp”
  187.                         android:textColor=”#000″ />
  188.                     <ImageView
  189.                         android:id=”@+id/SimageView6″
  190.                         android:layout_width=”wrap_content”
  191.                         android:layout_height=”wrap_content”
  192.                         android:scaleType=”matrix”
  193.                         android:layout_centerVertical=”true”
  194.                         android:layout_alignParentRight=”true”
  195.                         android:src=”@drawable/mm_submenu” />
  196.                 </RelativeLayout>
  197.                 <!–   ***********************************************************************   –>
  198.                 <RelativeLayout
  199.                     android:id=”@+id/SrelativeLayout7″
  200.                     android:layout_width=”fill_parent”
  201.                     android:layout_height=”wrap_content”
  202.                     android:layout_marginTop=”14dp”
  203.                     android:gravity=”center_vertical”
  204.                     android:clickable=”true”
  205.                     android:background=”@drawable/preference_first_item” >
  206.                     <TextView
  207.                         android:id=”@+id/StxtView7″
  208.                         android:layout_width=”wrap_content”
  209.                         android:layout_height=”wrap_content”
  210.                         android:padding=”8dp”
  211.                         android:text=”清空微日记”
  212.                         android:textSize=”20sp”
  213.                         android:textColor=”#000″ />
  214.                     <ImageView
  215.                         android:id=”@+id/SimageView7″
  216.                         android:layout_width=”wrap_content”
  217.                         android:layout_height=”wrap_content”
  218.                         android:scaleType=”matrix”
  219.                         android:layout_centerVertical=”true”
  220.                         android:layout_alignParentRight=”true”
  221.                         android:src=”@drawable/mm_submenu” />
  222.                 </RelativeLayout>
  223.                 <RelativeLayout
  224.                     android:id=”@+id/SrelativeLayout8″
  225.                     android:layout_width=”fill_parent”
  226.                     android:layout_height=”wrap_content”
  227.                     android:gravity=”center_vertical”
  228.                     android:clickable=”true”
  229.                     android:background=”@drawable/preference_item” >
  230.                     <TextView
  231.                         android:id=”@+id/StxtView8″
  232.                         android:layout_width=”wrap_content”
  233.                         android:layout_height=”wrap_content”
  234.                         android:padding=”8dp”
  235.                         android:text=”初始化设置”
  236.                         android:textSize=”20sp”
  237.                         android:textColor=”#000″ />
  238.                     <ImageView
  239.                         android:id=”@+id/SimageView8″
  240.                         android:layout_width=”wrap_content”
  241.                         android:layout_height=”wrap_content”
  242.                         android:scaleType=”matrix”
  243.                         android:layout_centerVertical=”true”
  244.                         android:layout_alignParentRight=”true”
  245.                         android:src=”@drawable/mm_submenu” />
  246.                 </RelativeLayout>
  247.                 <RelativeLayout
  248.                     android:id=”@+id/SrelativeLayout9″
  249.                     android:layout_width=”fill_parent”
  250.                     android:layout_height=”wrap_content”
  251.                     android:gravity=”center_vertical”
  252.                     android:clickable=”true”
  253.                     android:background=”@drawable/preference_last_item” >
  254.                     <TextView
  255.                         android:id=”@+id/StxtView9″
  256.                         android:layout_width=”wrap_content”
  257.                         android:layout_height=”wrap_content”
  258.                         android:padding=”8dp”
  259.                         android:text=”初始化应用程序”
  260.                         android:textSize=”20sp”
  261.                         android:textColor=”#000″ />
  262.                     <ImageView
  263.                         android:id=”@+id/SimageView9″
  264.                         android:layout_width=”wrap_content”
  265.                         android:layout_height=”wrap_content”
  266.                         android:scaleType=”matrix”
  267.                         android:layout_centerVertical=”true”
  268.                         android:layout_alignParentRight=”true”
  269.                         android:src=”@drawable/mm_submenu” />
  270.                 </RelativeLayout>
  271.                 <!–   ********************************************************************   –>
  272.                 <RelativeLayout
  273.                     android:id=”@+id/SrelativeLayout10″
  274.                     android:layout_width=”fill_parent”
  275.                     android:layout_height=”wrap_content”
  276.                     android:layout_marginTop=”14dp”
  277.                     android:gravity=”center_vertical”
  278.                     android:clickable=”true”
  279.                     android:background=”@drawable/preference_first_item” >
  280.                     <TextView
  281.                         android:id=”@+id/StxtView10″
  282.                         android:layout_width=”wrap_content”
  283.                         android:layout_height=”wrap_content”
  284.                         android:padding=”8dp”
  285.                         android:text=”帮助与反馈”
  286.                         android:textSize=”20sp”
  287.                         android:textColor=”#000″ />
  288.                     <ImageView
  289.                         android:id=”@+id/SimageView10″
  290.                         android:layout_width=”wrap_content”
  291.                         android:layout_height=”wrap_content”
  292.                         android:scaleType=”matrix”
  293.                         android:layout_centerVertical=”true”
  294.                         android:layout_alignParentRight=”true”
  295.                         android:src=”@drawable/mm_submenu” />
  296.                 </RelativeLayout>
  297.                 <RelativeLayout
  298.                     android:id=”@+id/SrelativeLayout11″
  299.                     android:layout_width=”fill_parent”
  300.                     android:layout_height=”wrap_content”
  301.                     android:gravity=”center_vertical”
  302.                     android:clickable=”true”
  303.                     android:background=”@drawable/preference_last_item” >
  304.                     <TextView
  305.                         android:id=”@+id/StxtView11″
  306.                         android:layout_width=”wrap_content”
  307.                         android:layout_height=”wrap_content”
  308.                         android:padding=”8dp”
  309.                         android:text=”关于”
  310.                         android:textSize=”20sp”
  311.                         android:textColor=”#000″ />
  312.                     <ImageView
  313.                         android:id=”@+id/SimageView11″
  314.                         android:layout_width=”wrap_content”
  315.                         android:layout_height=”wrap_content”
  316.                         android:scaleType=”matrix”
  317.                         android:layout_centerVertical=”true”
  318.                         android:layout_alignParentRight=”true”
  319.                         android:src=”@drawable/mm_submenu” />
  320.                 </RelativeLayout>
  321.                     <Button
  322.                         android:id=”@+id/Sbtn_close”
  323.                         android:layout_width=”fill_parent”
  324.                         android:layout_height=”wrap_content”
  325.                         android:layout_marginTop=”10dp”
  326.                         android:layout_marginBottom=”10dp”
  327.                         android:layout_marginLeft=”12dp”
  328.                         android:layout_marginRight=”12dp”
  329.                         android:padding=”4dp”
  330.                         android:text=”退出登录”
  331.                         android:textSize=”15sp”
  332.                         android:textColor=”#fff”
  333.                         android:gravity=”center”
  334.                         android:background=”@drawable/btn_style_red”
  335.                         android:onClick=”exit_settings”
  336.                         />
  337.             </LinearLayout>
  338.     </ScrollView>
  339. </LinearLayout>

这种方法效果图:  

 

 

具体代码参考:http://www.cnblogs.com/qianxudetianxia/archive/2011/09/19/2068760.html                                                                                                                                       http://www.apkbus.com/forum.php?mod=viewthread&tid=70342

标签