首页 > 移动开发 > Android：仿微信设置菜单

Android：仿微信设置菜单

孤风一剑 5月 21, 2013 174 0

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

这种方法效果图：  

 

 

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

标签

相关推荐

标签

.NET (32) ActiveMQ (34) AJAX (29) android (463) android开发 (34) ASP.NET (58) C# (153) CSS (21) eclipse (50) Hadoop (23) Hibernate (51) HTML (30) html5 (29) IOS (48) JAVA (378) JavaScript (87) JQuery (85) js (53) json (26) jsp (28) Linux (70) ListView (28) mvc (28) myeclipse (25) MySQL (151) oracle (181) PHP (158) spring (84) SQL (62) SQL Server (28) string (20) Struts2 (39) Tomcat (39) Ubuntu (20) WEB (28) webservice (29) Windows (27) XML (36) 多线程 (21) 存储过程 (22) 实例 (24) 数据库 (89) 服务器 (31) 算法 (34) 设计模式 (23)

文章归档