快捷導(dǎo)航

android UI進(jìn)階之a(chǎn)ndroid中隱藏的layout 抽屜的使用方法

更新時(shí)間：2013年05月27日 10:57:14 作者：

android UI進(jìn)階之a(chǎn)ndroid中隱藏的layout 抽屜的使用方法，需要的朋友可以參考一下

最近在寫一個(gè)應(yīng)用，想把設(shè)置頁面和應(yīng)用頁面放在一起，這樣就能實(shí)現(xiàn)用戶可以實(shí)時(shí)看到自己的設(shè)置對UI的影響，從而更方便的設(shè)置用戶喜歡的界面。想了一段時(shí)間，發(fā)現(xiàn)用slidingDrawer這個(gè)控件可以實(shí)現(xiàn)這個(gè)效果。也就是一個(gè)抽屜。拉開抽屜，占據(jù)半個(gè)屏幕，另外半個(gè)屏幕還是顯示應(yīng)用頁面。效果還是不錯(cuò)的。

今天就和大家分享一下android中這個(gè)抽屜效果。其實(shí)在android的lanucher就是一個(gè)抽屜，打開它就可以看到安裝的應(yīng)用。相信大家都見過用過。下面我們就來做個(gè)相同的效果，當(dāng)然只是UI上差不多相同的效果。

slidingDrawer這個(gè)控件使用非常簡單，基本在xml里面配置就可以。代碼如下所示。

復(fù)制代碼代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    android:textSize="20sp"
/>
<SlidingDrawer
    android:id="@+id/sd"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:handle="@+id/iv"
    android:content="@+id/myContent"
    android:orientation="vertical"
>

在SlidingDrawer這個(gè)標(biāo)簽下android:handle：指示的就是抽屜的圖片。android:content:指向的就是抽屜里面的布局。有了這個(gè)布局，其實(shí)一個(gè)抽屜就出來了。

下面我們看Chouti這個(gè)類的代碼

復(fù)制代碼代碼如下:

public class Chouti extends Activity {

  private GridView gv;
  private SlidingDrawer sd;
  private ImageView iv;
  private int[] icons={R.drawable.browser,R.drawable.gallery,
                        R.drawable.camera,R.drawable.gmail,
                        R.drawable.music,R.drawable.market,
                        R.drawable.phone,R.drawable.messages,R.drawable.maps};
  private String[] items={"瀏覽器","圖片","相機(jī)","時(shí)鐘","音樂","市場","撥號","信息","地圖"};

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        gv = (GridView)findViewById(R.id.myContent); 
        sd = (SlidingDrawer)findViewById(R.id.sd);
        iv=(ImageView)findViewById(R.id.iv);
        MyAdapter adapter=new MyAdapter(this,items,icons);//自定義MyAdapter來實(shí)現(xiàn)圖標(biāo)加item的顯示效果
        gv.setAdapter(adapter);
        sd.setOnDrawerOpenListener(new SlidingDrawer.OnDrawerOpenListener()//開抽屜
        {
          @Override
          public void onDrawerOpened()
          {
            iv.setImageResource(R.drawable.close1);//響應(yīng)開抽屜事件 ，把圖片設(shè)為向下的
          }
        });
        sd.setOnDrawerCloseListener(new SlidingDrawer.OnDrawerCloseListener()
        {
          @Override
          public void onDrawerClosed()
          {
            iv.setImageResource(R.drawable.open1);//響應(yīng)關(guān)抽屜事件
          }
        });
    }
}

在整個(gè)類里面將布局導(dǎo)入，同時(shí)設(shè)置開關(guān)抽屜的監(jiān)聽事件。這里面我們需要自定義一個(gè)MyAdapter來顯示帶文字下標(biāo)的圖片。

下面是MyAdapter這個(gè)類的代碼

復(fù)制代碼代碼如下:

public class MyAdapter extends BaseAdapter
{
private Context _ct;
private String[] _items;
private int[] _icons;

public MyAdapter(Context ct,String[] items,int[] icons) //構(gòu)造器
{
    _ct=ct;
    _items=items;
    _icons=icons;
}

@Override
public int getCount()
{
return _items.length;
}

@Override
public Object getItem(int arg0)
{
return _items[arg0];
}

@Override
public long getItemId(int position)
{
return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent)
{
    LayoutInflater factory = LayoutInflater.from(_ct);
    View v = (View) factory.inflate(R.layout.gv, null);//綁定自定義的layout
    ImageView iv = (ImageView) v.findViewById(R.id.icon);
    TextView tv = (TextView) v.findViewById(R.id.text);
    iv.setImageResource(_icons[position]);
    tv.setText(_items[position]);
    return v;
}
}

也是非常的簡單，其中用到的布局如下

復(fù)制代碼代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
>
  <ImageView 
    android:id="@+id/icon"
    android:layout_width="wrap_content"
    android:layout_height="40px"
    android:layout_gravity="center"
  />
  <TextView 
    android:id="@+id/text"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:textColor="#ffffffff"
  />
</LinearLayout>