android UI進階之android中隱藏的layout 抽屜的運用

最近在寫一個應用，想把設置頁面和應用頁面放在一塊兒，這樣就能實現用戶能夠實時看到本身的設置對UI的影響，從而更方便的設置用戶喜歡的界面。想了一段時間，發現用slidingDrawer這個控件能夠實現這個效果。也就是一個抽屜。拉開抽屜，佔據半個屏幕，另外半個屏幕仍是顯示應用頁面。效果仍是不錯的。

今天就和你們分享一下android中這個抽屜效果。其實在android的lanucher就是一個抽屜，打開它就能夠看到安裝的應用。相信你們都見過用過。下面咱們就來作個相同的效果，固然只是UI上差很少相同的效果。

slidingDrawer這個控件使用很是簡單，基本在xml裏面配置就能夠。代碼以下所示。

<?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"
  >

      <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/open1"
      />

      <GridView
      android:id="@id/myContent"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:numColumns="3"
      android:background="@drawable/background"
      android:gravity="center"
    />

  </SlidingDrawer>
</RelativeLayout>



在SlidingDrawer這個標籤下android:handle：指示的就是抽屜的圖片。android:content:指向的就是抽屜裏面的佈局。有了這個佈局，其實一個抽屜就出來了。

下面咱們看Chouti這個類的代碼

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={"瀏覽器","圖片","相機","時鐘","音樂","市場","撥號","信息","地圖"};

    /** 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來實現圖標加item的顯示效果
        gv.setAdapter(adapter);
        sd.setOnDrawerOpenListener(new SlidingDrawer.OnDrawerOpenListener()//開抽屜
        {
          @Override
          public void onDrawerOpened()
          {
            iv.setImageResource(R.drawable.close1);//響應開抽屜事件 ，把圖片設爲向下的
          }
        });
        sd.setOnDrawerCloseListener(new SlidingDrawer.OnDrawerCloseListener()
        {
          @Override
          public void onDrawerClosed()
          {
            iv.setImageResource(R.drawable.open1);//響應關抽屜事件
          }
        });
    }
}

在整個類裏面將佈局導入，同時設置開關抽屜的監聽事件。這裏面咱們須要自定義一個MyAdapter來顯示帶文字下標的圖片。

下面是MyAdapter這個類的代碼


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

  public MyAdapter(Context ct,String[] items,int[] icons) //構造器
  {
    _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;
  }
}

也是很是的簡單，其中用到的佈局以下

<?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>

這樣，咱們的抽屜就完成啦 來看下效果 以前不能看到圖 如今應該能了吧。

 

就寫這麼多啦。抽屜這個控件很是實用，除了我在開頭所說的我在程序中的應用外，還有不少的用途， 發揮你的想象力，抽屜將爲你的應用增色很多。