Android DrawerLayout 的使用

jopen 9年前發布 | 48K 次閱讀 Android Android開發 移動開發

Android L  Android Studio 1.4

從主視圖左側能抽出一個導航欄,效果圖:

 點擊后彈出新界面: 

新界面也可以抽出左側導航欄

 

 

1.配置xml文件,指定根視圖和左右抽屜視圖

2.Activity中加載xml文件,設定UI動作

代碼

首先配置 main_layout.xml 文件;用v4包里的DrawerLayout,指定一個FrameLayout作為根視圖,后續可以把Fragment插入到這個FrameLayout中

抽屜視圖是一個RelativeLayout,里面承載著幾個UI,ListView用于裝按鈕,下面是退出按鍵

<android.support.v4.widget.DrawerLayout xmlns:android="

<!-- The left navigation drawer -->
<RelativeLayout
    android:id="@+id/left_relative_drawer"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="#ffffcc"
    android:clickable="true"><!-- clickable="true" 防止點擊事件穿透 -->


    <ImageButton
        android:id="@+id/imagebtn_left_head"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:background="@drawable/littleboygreen"
        android:scaleType="fitXY" />

    <ListView
        android:id="@+id/left_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/imagebtn_left_head"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="10dp"
        android:paddingTop="5dp"></ListView>

    <Button
        android:id="@+id/btn_left_exit"
        android:layout_width="140dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/left_list"
        android:layout_centerInParent="true"
        android:layout_marginTop="50dp"
        android:background="@drawable/button_corner_shape"
        android:text="退出應用"
        android:textSize="20sp" />

    <Button
        android:id="@+id/btn_left_confirm"
        android:layout_width="70dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/left_list"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="50dp"
        android:background="@drawable/button_corner_shape"
        android:text="退出"
        android:textSize="20sp" />

    <Button
        android:id="@+id/btn_left_cancel"
        android:layout_width="70dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/left_list"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="50dp"
        android:layout_toRightOf="@id/btn_left_confirm"
        android:background="@drawable/button_cancel_corner_shape"
        android:text="取消"
        android:textSize="20sp" />

</RelativeLayout>


</android.support.v4.widget.DrawerLayout></pre>

在MainActivity.java的onCreate方法中加載這個layout

setContentView(R.layout.main_layout);
</div> </td> </tr> </tbody> </table> </div> </div> </div>

主視圖就只有一張背景,新寫一個MainFragment加載進去

MainFragment.java

public class MainFragment extends Fragment {

......

private Toolbar toolbar;

......

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.main_relativelayout, container,false);

/* 這里設置UI,設置按鈕監聽等等 */
/* 為防止單調,顯示放屏幕分辨率和屏幕方向 */
    return rootView;
}

/* 屏幕分辨率 */
private String getScreenRatio(){
    StringBuilder ratio = new StringBuilder("");
    mDisplay = ((WindowManager)getActivity().getSystemService(Context.WINDOW_SERVICE))
            .getDefaultDisplay();/* 先getActivity */
    DisplayMetrics mDisplayMetrics = new DisplayMetrics();
    mDisplay.getMetrics(mDisplayMetrics);
    mDisplay.getSize(mCurrentDisplaySize);/* 豎屏Point(1536, 1964) 橫屏Point(2048, 1452) */
    Log.d("rust","mCurrentDisplaySize  "+ mCurrentDisplaySize);
    int screenWidth = mDisplayMetrics.widthPixels;
    int screenHeight = mDisplayMetrics.heightPixels;
    ratio.append(screenWidth);
    ratio.append(" x ");
    ratio.append(screenHeight);
    return ratio.toString();
}
/* 獲取屏幕方向 */
private void getOrientation() {
    config = getResources().getConfiguration();/* 檢查屏幕方向 */
    if (config.orientation == Configuration.ORIENTATION_LANDSCAPE){
        screenOrientation = "LANDSCAPE";
    } else if (config.orientation == Configuration.ORIENTATION_PORTRAIT) {
        screenOrientation = "PORTRAIT";
    } else {
        screenOrientation = "Unknow";
    }
}

}</pre>

回到MainActivity.java的onCreate方法,把MainFragment加載進去

mainFragment = new MainFragment();/ 指定一個單獨的Fragment /

......

final FragmentManager fragmentManager = getFragmentManager();/ 加載到root容器 / fragmentManager.beginTransaction().add(R.id.root_framelayout, mainFragment).commit();</pre>

同樣在MainActivity.java的onCreate方法中加載一下導航欄

/ 左抽屜 /
        leftDrawer = (RelativeLayout) findViewById(R.id.left_relative_drawer);

    /* 左列表在左抽屜里 */
    leftList = (ListView) leftDrawer.findViewById(R.id.left_list);

    /* 適配器裝載數據;即初始化導航列表;這里使用SimpleAdapter,加載自定義的LinearLayout作為按鈕 */
    contentLeftAdapter = new SimpleAdapter(this, leftDrawerListData(),
            R.layout.list_item_linearlayout, new String[]{"image","text"},
            new int[]{R.id.image_left_item,R.id.tv_left_item});

    leftList.setAdapter(contentLeftAdapter);

    /* 為list設置ClickListener;DrawerOnItemClickListener定義在下面*/
    leftList.setOnItemClickListener(new DrawerOnItemClickListener());

    imageBtnLeft.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            fragmentManager.beginTransaction()
                    .replace(R.id.root_framelayout, mainFragment)
                    .commit();
            mDrawerLayout.closeDrawer(leftDrawer);
        }
    });

    btnExit.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            btnConfirmExit.setVisibility(View.VISIBLE);
            btnCancelExit.setVisibility(View.VISIBLE);
            btnExit.setVisibility(View.INVISIBLE);
        }
    });

    btnCancelExit.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            btnCancelExit.setVisibility(View.INVISIBLE);
            btnConfirmExit.setVisibility(View.INVISIBLE);
            btnExit.setVisibility(View.VISIBLE);
        }
    });

    btnConfirmExit.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

// finish(); android.os.Process.killProcess(android.os.Process.myPid()); } });</pre>

往listview中添加內容的方法

private List<Map<String, Object>> leftDrawerListData(){
        List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("image", R.drawable.orange01);
        map.put("text", "橘子");
        list.add(map);

    map = new HashMap<String, Object>();
    map.put("image", R.drawable.sixtraveltransportation);
    map.put("text", "路標");
    list.add(map);

    map = new HashMap<String, Object>();
    map.put("image", R.drawable.traintraveltransportation);
    map.put("text", "火車");
    list.add(map);

    map = new HashMap<String, Object>();
    map.put("image", R.drawable.ecologytree);
    map.put("text", "樹苗");
    list.add(map);

    map = new HashMap<String, Object>();
    map.put("image", R.drawable.ecology);
    map.put("text", "插頭");
    list.add(map);

    return list;
}</pre><br />

導航欄按鈕監聽

private class DrawerOnItemClickListener implements AdapterView.OnItemClickListener{
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            seleteItem(position);/ 按鈕選擇 /
        }
    }

private void seleteItem(int position){
    leftList.setItemChecked(position, true);

    Fragment newFragment = new ContentFragment();/* new 一個子fragment */
    Bundle args = new Bundle();
    args.putInt(ContentFragment.ARG_SHOW_FRAGMENT,position);
    newFragment.setArguments(args);/* 裝載數據 */

    FragmentManager childFragmentManager = getFragmentManager();
    childFragmentManager.beginTransaction()
            .replace(R.id.root_framelayout, newFragment)
            .commit();/* 替換當前fragment */

    /* 最后關閉左側抽屜 */
    mDrawerLayout.closeDrawer(leftDrawer);
}</pre><br />

點擊一下導航欄的按鈕,就會把原來的MainFragment替換掉

 

DrawerLayout往往和Fragment結合起來使用;布局界面可以更豐富和靈活

如果跳到另一個Activity,就抽不出MainActivity的DrawerLayout

 

來自:http://www.cnblogs.com/rustfisher/p/4906502.html

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!
  • sesese色