Android NavigationDrawer 小程序

最新推荐文章于 2023-04-07 22:33:58 发布

原创最新推荐文章于 2023-04-07 22:33:58 发布 · 567 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在Android应用中实现导航抽屉功能，包括构造布局文件、定义ListView项及交互逻辑。具体步骤涵盖创建Activity、实例化DrawerLayout与ListView、定义适配器等。

实现功能：

1. 屏幕由左侧向右侧滑动，弹出drawer, 继而以ListView的形式显示内容

2. ListView上，每个Item显示三部分，1个ImageView用于显示颜色，一个ImageView用于显示图标，一个TextView用于显示文字

3. 单击某个Item时，Activity的title显示Item中文字的内容，Item背景变深，标识按键被触发。

4. 当单击Item3时，Item3的文字内容由原来的“测试3”修改为“Test”

步骤：

1. 首先构造Navigation Drawer的layout文件。

<1>填写id, 用于实例化DrawerLayout对象

<2>第一个元素是frameLayout, 即Drawer没有打开时显示的内容

<3>第二个元素是Drawer打开时显示的内容，这里用Listview来显示，填写id, 用于实例化ListView对象

<android.support.v4.widget.DrawerLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/<span style="color:#ff6666;">drawer_layout</span>"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
 
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </FrameLayout>
 
    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#7A7A7A"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="2dp" />
 
</android.support.v4.widget.DrawerLayout>

2. 构造Listview 的Item的layout，包括三个控件。

<1>第一个控件为ImageView，用于显示颜色

<2>第二个控件为ImageView，用于显示图标

<3>第三个控件为TextView，用于显示文字

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:gravity="center_vertical" >

    <ImageView
        android:id="@+id/item_color_block"
        android:layout_width="6dp"
        android:layout_height="match_parent"
        android:background="@color/orange" 
    	android:contentDescription="@string/null_string" />

    <ImageView
        android:id="@+id/item_icon"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_margin="8dp"
        android:contentDescription="@string/null_string"
        android:src="@drawable/coolmonkey_01" />

    <TextView
        android:id="@+id/item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text=""
        android:textSize="24sp"
        android:textStyle="bold" />

</LinearLayout>

3. MainActicity.java 程序， code is below:

package com.example.drawer_test;

import javax.security.auth.PrivateCredentialPermission;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.app.Fragment;
import android.app.FragmentManager;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.widget.AdapterView; 
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;


public class MainActivity extends Activity {
	
	private String[] mPlanetTitles; //Drawer中listView的Item显示的文本内容
	private DrawerLayout mDrawerLayout; // Drawer对象
	private ListView mDListView;// ListView 对象

	@Override
	protected void onCreate(Bundle savedInstanceState) {


		super.onCreate(savedInstanceState);
		setContentView(R.layout.drawer_layout);


		//实例化DrawerLayout对象
		mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);


		//initialize ListView
		initListView();
		
	}
	
	protected void initListView(){


		//实例化ListView对象
		mDListView = (ListView)findViewById(R.id.left_drawer);
		
		//得到ListView的内容
		mPlanetTitles = getResources().getStringArray(R.array.listview_menu);
	
		//利用适配器填装数据
		DrawerAdapter mDrawerAdapter = new DrawerAdapter(this, R.layout.drawer_list_item, mPlanetTitles);
		mDListView.setAdapter( mDrawerAdapter );
		
		//注册list item的点击事件
		mDListView.setOnItemClickListener(new OnItemClickListener(){		

			@Override
			public void onItemClick(AdapterView<?> parent, 
									View view, 
									int position,
									long id) {
				// TODO Auto-generated method stub
				
				 // Highlight the selected item, update the title, and close the
                // drawer
				mDListView.setItemChecked(position, true);
				setTitle(mPlanetTitles[position]);
				mDListView.setItemChecked(position, false);
				
				if(mPlanetTitles[position].equals("测试3") )
				{
					TextView view_value = (TextView)view.findViewById(R.id.item_title);
					view_value.setText("Test");
					mPlanetTitles[position] = "Test";
					mDrawerAdapter.notifyDataSetChanged();			
			     }
			}
		});
	}

		
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

<1>创建Activity, Layout的文件为Drawer的Layout

<2>通过findViewById实例化DrawerLayout对象

<3>通过findViewById实例化ListView对象

Note: 实例化对象时，是借助xml来对各个属性进行定义。xml文件只是实例化具体的对象，不和对象进行绑定。

<4>定义String mPlanetTitle[]类型的数组，为了给Listview 的Item赋值。数组的值是通过Activity的 getResources().getStringArray(R.array.listview_menu)来获得，因为需要在value文件家中定义array数组。新添加一个xml文件，然后添加<source > <string array> <item> </item> </string array> </source >

<?xml version="1.0" encoding="utf-8"?>
<resources>                                   
        <string-array name="listview_menu">  
        <item>测试1</item>
        <item>测试2</item>
        <item>测试3</item>
    	</string-array>
</resources>

<5>定义颜色的名称，方便通过名称查找颜色。可以通过getResource().getColor(R.color.blue). 在value文件夹下面新建xml文件。

<?xml version="1.0" encoding="utf-8"?>
<resources>                                            
    <item name="blue" type="color">#FF33B5E5</item>    
    <item name="purple" type="color">#FFAA66CC</item>
    <item name="green" type="color">#FF99CC00</item>
    <item name="orange" type="color">#FFFFBB33</item>
    <item name="red" type="color">#FFFF4444</item>
    <item name="darkblue" type="color">#FF0099CC</item>
    <item name="darkpurple" type="color">#FF9933CC</item>
    <item name="darkgreen" type="color">#FF669900</item>
    <item name="darkorange" type="color">#FFFF8800</item>
    <item name="darkred" type="color">#FFCC0000</item>
    <item name="white" type="color">#FFFFFFFF</item>
</resources>

<6>通过Adapter装配Listview中Item的layout. 新建类DrawerAdapter 继承ArrayAdapter

package com.example.drawer_test;

import android.R.integer;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class DrawerAdapter extends ArrayAdapter<String>{
	
	private Context mCtx;
	private LayoutInflater mInflater; //类似findViewById,只是寻找view,用于动态加载View
	int mItem_layout;   //int类型，用于标识Item的Layout

//构造函数

	public DrawerAdapter(Context context, int resource, String[] objects) {
		super(context, resource, objects);
		// TODO Auto-generated constructor stub
		
		mCtx = context;
		mItem_layout = resource;
		mInflater =  LayoutInflater.from(context);	
	}

//重写getView函数。装配每个Item时都会调用此函数。
	@Override
	public View getView(int position, View convertView, ViewGroup parent){
		
		int        color = 0;  //用于显示第一个Imageview
		String     mItem_value = getItem(position); //得到针对某个Item传入的string的值，该方法是Adapter的方法
		Drawable   icon = null;


		ViewHolder holder;  //用于给Item设置tag		
		
		//convertView是item的view,第一加载时，都为空，需要利用LayouInflater的inflate方法动态加载。

<span style="white-space:pre">		</span>//加载完成后相当于给该Item的View进行了实例化。

<span style="white-space:pre">		</span>//下次可以直接view.getTag来使用


		if( (convertView == null) || (convertView.getTag() == null)){
			
			convertView = mInflater.inflate(mItem_layout, null);
			holder = new ViewHolder();
			convertView.setTag(holder);
		}else {
			holder = (ViewHolder)convertView.getTag();
		}

<span style="white-space:pre">		</span>//实例化Viewholder的三个对象	
		holder.Item_title = (TextView)convertView.findViewById(R.id.item_title);
		holder.Item_icon  = (ImageView)convertView.findViewById(R.id.item_icon);
		holder.Item_color_black  = (ImageView)convertView.findViewById(R.id.item_color_block);
		
		if(mItem_value.equals("测试1")){
			color = mCtx.getResources().getColor(R.color.red);
			icon  = mCtx.getResources().getDrawable(R.drawable.coolmonkey_01);
		}else if(mItem_value.equals("测试2")){
			color = mCtx.getResources().getColor(R.color.blue);
			icon  = mCtx.getResources().getDrawable(R.drawable.coolmonkey_02);
		}else if(mItem_value.equals("测试3")
				|| mItem_value.equals(holder.Item_title.getText())){
			color = mCtx.getResources().getColor(R.color.green);
			icon  = mCtx.getResources().getDrawable(R.drawable.coolmonkey_03);
		}
		
		holder.Item_title.setText(mItem_value);
		holder.Item_color_black.setBackgroundColor(color);
		holder.Item_icon.setImageDrawable(icon);
			
		return convertView;
	
	}
	
	public class ViewHolder{
	
		TextView  Item_title;
		ImageView Item_icon;
		ImageView Item_color_black;
	}

}

<7>设置Item的单点触发函数

//注册list item的点击事件
		mDListView.setOnItemClickListener(new OnItemClickListener(){		

			@Override
			public void onItemClick(AdapterView<?> parent, 
						View view, //Item对应的view
						int position, //Item对应position
						long id) {
				// TODO Auto-generated method stub
				
				 // Highlight the selected item, update the title, and close the drawer
				mDListView.setItemChecked(position, true); //highlight selected item
				setTitle(mPlanetTitles[position]);         //设置activity的title
				mDListView.setItemChecked(position, false);
				
				if(mPlanetTitles[position].equals("测试3") )  //比较字符串只能用equals函数
				{
					TextView view_value = (TextView)view.findViewById(R.id.item_title);
					view_value.setText("Test");
					mPlanetTitles[position] = "Test";
					mDrawerAdapter.notifyDataSetChanged();	//会触发执行getview（）函数		
			     }
			}
		});

<span style="white-space:pre">	</span>if( (convertView == null) || (convertView.getTag() == null)){
<span style="white-space:pre">			</span>
<span style="white-space:pre">			</span>convertView = mInflater.inflate(mItem_layout, null);
<span style="white-space:pre">			</span>holder = new ViewHolder();
<span style="white-space:pre">			</span>convertView.setTag(holder);
<span style="white-space:pre">		</span>}else {
<span style="white-space:pre">			</span>holder = (ViewHolder)convertView.getTag();  //会执行这行code
<span style="white-space:pre">		</span>}

<pre name="code" class="html">//通过比较字符串来修改iterm3的值，也可以用之前设定的color来定位

//总之，拿不变的值来定位

else if(mItem_value.equals("测试3")|| mItem_value.equals(holder.Item_title.getText())){  
			color = mCtx.getResources().getColor(R.color.green); //
			icon  = mCtx.getResources().getDrawable(R.drawable.coolmonkey_03);
		}

8. 程序的图片