2. 程式人生 > >android DrawerLayout 側邊欄實現

android DrawerLayout 側邊欄實現

阿新 • • 發佈：2019-01-29

現在實現側邊欄比較簡單了，官方提供的DrawerLayout可以很方便實現。
主要實現方法是:用DrawerLayout 作為介面根控制元件。在DrawerLayout裡面第一個View為當前介面主內容；第二個和第三個View為抽屜選單內容。如果當前介面只需要一個抽屜選單，則第三個View可以省略。
第一個View的寬高應當設定為match_parent
第二、三個View需要設定android:layout_gravity=”left”，和android:layout_gravity=”right”且一搬高度設定為match_parent，寬度為固定值，即側滑選單的寬度，寬度應該不超過320dp，這樣使用者可以在選單開啟的時候看到部分內容介面。如果需要監聽選單開啟關閉事件，則需要呼叫 DrawerLayout類的setDrawerListener()
該介面提供了選單開啟關閉等事件的回撥函式，例如
onDrawerOpened()
和
onDrawerClosed()
效果圖：
這裡寫圖片描述


描述一下：右側滑出側邊欄，包括一個標題，一個車輛列表，點選列表，右側滑出一個與側邊欄等寬的popupwindow，也包括標題與列表，點選popupwindow消失。主要有兩點，第一是側邊欄，第二是popupwindow以及滑動動畫
上程式碼：
主佈局activity_favorite_car.xml

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
 

    android:id="@+id/id_drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f2f2f2">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
 
>

        <boerpower.com.boerchargingpile.UI.CustomTitles.TitleLayout
            android:id="@+id/id_titleLayot"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@mipmap/top">

        </boerpower.com.boerchargingpile.UI.CustomTitles.TitleLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp"
            android:background="#ffffff"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/id_imageMyCar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="88dp"
                android:layout_marginBottom="88dp"
                android:src="@mipmap/mycar_2" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/id_linearCarKind"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:background="@drawable/rect_white"
            android:padding="10dp"
            android:gravity="center">
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:textSize="14sp"
                android:layout_weight="1"
                android:text="@string/mycar_kind"
                android:drawableLeft="@mipmap/mycar"
                android:drawablePadding="10dp"
                android:textColor="#3a3a3a"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/next_arrow"
                />
        </LinearLayout>
    </LinearLayout>


    <LinearLayout
        android:id="@+id/id_right_menu"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:background="@mipmap/top"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/id_imageUp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/back"
                android:layout_margin="12dp"/>

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:text="@string/mycar_favorite"
                android:textColor="#ffffff"
                android:textSize="17sp" />
        </LinearLayout>

        <ListView
            android:id="@+id/id_listView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#ffffff"
            android:cacheColorHint="#00000000"
            android:divider="#f2f2f2"
            android:dividerHeight="1dp"/>
    </LinearLayout>

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

主介面程式碼

//我的愛車
public class FavoriteCarActivity extends BaseActivity implements TitleLayout.titleLayoutClick {
    private TitleLayout titleLayout;
    private ImageView imageViewCar;
    private LinearLayout linearLayoutCarKind;
    private LinearLayout linearLayoutRight;//右邊欄
    private DrawerLayout mDrawerLayout;
    private ListView listViewCar;//車名稱
    private ArrayList<String> carNameList = new ArrayList<>();//車名稱
    private ArrayList<String> carModelList = new ArrayList<>();//車型別
    private PopupWindow popupWindow = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_favorite_car);
        titleLayout = (TitleLayout) findViewById(R.id.id_titleLayot);
        titleLayout.setTitle("我的愛車");
        imageViewCar = (ImageView) findViewById(R.id.id_imageMyCar);
        ImageView imageViewUp = (ImageView) findViewById(R.id.id_imageUp);
        linearLayoutCarKind = (LinearLayout) findViewById(R.id.id_linearCarKind);
        linearLayoutRight = (LinearLayout) findViewById(R.id.id_right_menu);
        linearLayoutCarKind.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                OpenRightMenu();
            }
        });
        mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawerLayout);
        mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,
                Gravity.RIGHT);
        listViewCar = (ListView) findViewById(R.id.id_listView);
        for (int i = 0; i < 10; i++) {
            carNameList.add("保時捷");
            carModelList.add("Panamera");
        }

        CarAdapter carAdapter = new CarAdapter();
        listViewCar.setAdapter(carAdapter);
        listViewCar.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                showCarModelPopupWindow();
            }
        });
        imageViewUp.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mDrawerLayout.closeDrawers();
            }
        });
    }


    public void OpenRightMenu() {
        mDrawerLayout.openDrawer(Gravity.RIGHT);
        mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,
                Gravity.RIGHT);
    }

    private class CarAdapter extends BaseAdapter {

        public CarAdapter() {

        }

        @Override
        public int getCount() {
            return carNameList.size();
        }

        @Override
        public Object getItem(int position) {
            return position;
        }

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


        @Override
        public View getView(int position, View convertView, ViewGroup parent) {

            if (convertView == null) {
                convertView = LayoutInflater.from(FavoriteCarActivity.this).inflate(R.layout.car_name_item, null);
            }

            TextView textViewCarName = ViewHolder.get(convertView, R.id.id_textViewCar);
            textViewCarName.setText(carNameList.get(position));


            return convertView;
        }

    }

    @Override
    public void leftViewClick() {
        finish();
    }

    @Override
    public void rightViewClick() {

    }


    private void showCarModelPopupWindow() {
        View view = View.inflate(FavoriteCarActivity.this, R.layout.car_model_list, null);
        ImageView imageViewUp = (ImageView) view.findViewById(R.id.id_imageUp);
        TextView textViewTitle = (TextView) view.findViewById(R.id.id_textViewCarName);
        ListView listViewCarModel = (ListView) view.findViewById(R.id.id_listViewCarModel);
        popupWindow = new PopupWindow(view, linearLayoutRight.getWidth(),
                LinearLayout.LayoutParams.MATCH_PARENT, true);
        popupWindow.setAnimationStyle(R.style.MenuAnimationLeftRight);
        popupWindow.setBackgroundDrawable(new BitmapDrawable());//需要設定背景，用物理鍵返回的時候
        popupWindow.setFocusable(true);
        popupWindow.setOutsideTouchable(true);  //設定點選螢幕其它地方彈出框消失
        CarModelAdapter carModelAdapter = new CarModelAdapter();
        listViewCarModel.setAdapter(carModelAdapter);
        listViewCarModel.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                popupWindow.dismiss();
            }
        });
        popupWindow.showAtLocation(titleLayout, Gravity.RIGHT, 0, 0);
        imageViewUp.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                popupWindow.dismiss();
            }
        });
    }

    private class CarModelAdapter extends BaseAdapter {

        public CarModelAdapter() {

        }

        @Override
        public int getCount() {
            return carModelList.size();
        }

        @Override
        public Object getItem(int position) {
            return position;
        }

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


        @Override
        public View getView(int position, View convertView, ViewGroup parent) {

            if (convertView == null) {
                convertView = LayoutInflater.from(FavoriteCarActivity.this).inflate(R.layout.car_model_item, null);
            }

            TextView textViewCarName = ViewHolder.get(convertView, R.id.id_textViewCarModel);
            textViewCarName.setText(carModelList.get(position));


            return convertView;
        }

    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            if (mDrawerLayout.isDrawerOpen(Gravity.RIGHT)) {
                mDrawerLayout.closeDrawers();
            } else {
                return super.onKeyDown(keyCode, event);
            }


            return true;
        }


        return super.onKeyDown(keyCode, event);
    }
}

標題類TitleLayout.java

/**
 * Created by dell on 2015/11/10.
 * 佈局標題
 */
public class TitleLayout extends RelativeLayout {
    TextView textViewContent;
    LinearLayout linearLeft;
    ImageView imageViewLeft;
    LinearLayout linearRight;
    ImageView imageViewRight;
    TextView textViewRight;
    private titleLayoutClick mListener;

    public TitleLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.title, this);
        textViewContent = (TextView) findViewById(R.id.id_textviewContent);
        linearLeft = (LinearLayout) findViewById(R.id.id_linearLeft);
        imageViewLeft = (ImageView)findViewById(R.id.id_left);
        linearRight = (LinearLayout) findViewById(R.id.id_linearRight);
        imageViewRight = (ImageView)findViewById(R.id.id_right);
        textViewRight = (TextView) findViewById(R.id.id_rightText);
        try{
            mListener = (titleLayoutClick) context;
        }catch (Exception e){
            e.printStackTrace();
        }

        linearLeft.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mListener != null) {
                    mListener.leftViewClick();
                }
            }
        });
        linearRight.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mListener != null) {
                    mListener.rightViewClick();
                }

            }
        });

    }

    public void setTitle(String title) {
        textViewContent.setText(title);
    }

    //設定右邊圖片
    public void setLinearRightImage(int drawableID) {
        imageViewRight.setBackgroundResource(drawableID);
    }
    //設定左邊圖片
    public void setLinearLeftImage(int drawableID) {
        imageViewLeft.setBackgroundResource(drawableID);
    }

    //設定右邊文字
    public void setLinearRightText(String rightTextString) {
        textViewRight.setText(rightTextString);
    }

    //設定右邊圖片為可見，根據viewID判斷文字與圖片的顯示，0顯示圖片，1顯示文字
    public void setLinearRightVisibility(int viewID) {

        linearRight.setVisibility(View.VISIBLE);
        if(viewID==0){
            imageViewRight.setVisibility(View.VISIBLE);
            textViewRight.setVisibility(View.INVISIBLE);
        }else if(viewID==1){
            textViewRight.setVisibility(View.VISIBLE);
            imageViewRight.setVisibility(View.INVISIBLE);
        }
    }

    public interface titleLayoutClick {
        public void leftViewClick();//左圖片點選
        public void rightViewClick();//右邊圖片點選
    }
}

標題類佈局title.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/id_top"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:id="@+id/id_linearLeft"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true">

        <ImageView
            android:id="@+id/id_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="12dp"
            android:background="@mipmap/back" />

    </LinearLayout>

    <LinearLayout

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">

        <TextView
            android:id="@+id/id_textviewContent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="12dp"
            android:textColor="@color/white"
            android:textSize="17sp"/>

    </LinearLayout>


    <LinearLayout
        android:id="@+id/id_linearRight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:visibility="invisible">

        <ImageView
            android:id="@+id/id_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="12dp" />
        <TextView
            android:id="@+id/id_rightText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="12dp"
            android:textSize="14sp"
            android:textColor="#ffffff"/>
    </LinearLayout>
</RelativeLayout>

列表項佈局就不寫了
動畫style

 <!-- PopupWindow左右滑動的視窗動畫 -->
    <style name="MenuAnimationLeftRight">
        <item name="android:windowEnterAnimation">@anim/menu_fadein_right</item>
        <item name="android:windowExitAnimation">@anim/menu_fadein_left</item>
    </style>

menu_fadein_right

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="500"
        android:fromXDelta="100%"
        android:toXDelta="0"
        />
</set>

menu_fadein_left

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="100%" />
</set>

相關推薦

android DrawerLayout 側邊欄實現

現在實現側邊欄比較簡單了，官方提供的DrawerLayout可以很方便實現。 主要實現方法是:用DrawerLayout 作為介面根控制元件。在DrawerLayout裡面第一個View為當前介面主內容；第二個和第三個View為抽屜選單內容。如果當前介面只需要

Android學習之基於DrawerLayout的側邊欄實現

本例，是基於AndroidStudio開發，用到v7包下DrawerLayout，Toolbar，和android.support.design下的NavigationView，需要在gradle中配置 compile 'com.android.support:appco

安卓基於DrawerLayout實現側邊欄實現

效果圖： 側邊欄在大多數app中都存在的， mDrawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED); //關閉手勢滑動 mDrawer_layout.setDrawerLockMode(Dra

JS側邊欄實現

1 <!DOCTYPE html> 2 <html lang="en"> 3 <style> 4 </style> 5 <head> 6 <meta charset="UTF-8"> 7 <title&g

Android雙向側邊滑動實現

Android雙向滑動實現 記得在很早之前，我寫了一篇關於Android滑動選單的文章，其中有一個朋友在評論中留言，希望我可以幫他將這個滑動選單改成雙向滑動的方式。當時也沒想花太多時間，簡單修改了一下就發給了他，結果沒想到後來卻有一大批的朋友都來問我要這份雙

Android側邊欄DrawerLayout實現問題筆記

關於DrawerLayout實現的側邊欄大家可以去Google官網查詢，已經很完善了。本章只記錄一些實現過程中遇到的問題，以後有時間會發布一篇複雜的DrawerLayout框架。 遇到的問題： 1.Fragment呼叫setArgyments(Bundle)的時候報錯：Fr

android自定義View之仿通訊錄側邊欄滑動，實現A-Z字母檢索

我們的手機通訊錄一般都有這樣的效果，如下圖： OK，這種效果大家都見得多了，基本上所有的android手機通訊錄都有這樣的效果。那我們今天就來看看這個效果該怎麼實現。 一.概述 1.頁面功能分析 整體上來說，左邊是一個ListView，右邊是一個自定義View，但

使用Android DrawLayout實現側邊欄功能

    “千呼萬喚始出來，猶抱琵琶半遮面”，白居易的《琵琶行》中，兩句話將琵琶女的難言之痛與羞澀情態描寫的逼真生動，一個抱著琵琶的女子呼之欲出，她的羞澀之美令人久久難以忘懷。     生活中有含蓄之美，程式設計也不能將所有的功能一下子全部展示給使用者，當然這也無法實現。這個

android介面設計（二）側邊欄的兩種實現方式

dome：https://github.com/linliangliang/sidebar 一、使用sideingMenu結合fragment實現。 二、使用NavigationView和DrawerLayout實現。 第一種實現方式：https://mp.csdn.net/posted

android介面設計（一）側邊欄的兩種實現方式

dome：https://github.com/linliangliang/sidebar 一、使用slideingMenu結合fragment實現。 二、使用Navigation和DrawerLayout實現。 第二種實現方式：https://mp.csdn.net/postedit/

Android學習筆記（四）之碎片化Fragment實現仿人人客戶端的側邊欄

    其實一種好的UI佈局，可以使使用者感到更加的親切與方便。最近非常流行的莫過於側邊欄了，其實我也做過很多側邊欄的應用，但是那些側邊欄的使用我都不是很滿意，現在重新整理，重新寫了一個相對來說我比較滿意的側邊欄，其中運用的就是android3.0版本之後新加的Fragme

Android實現仿qq側邊欄效果

public class MenuActivity extends FragmentActivity implements View.OnClickListener{ private ResideMenu resideMenu; private MenuActivity mContext;

個人中心的側邊欄--用jq實現側邊欄點擊一塊出現一塊其他幾塊隱藏並且同時改變前面的img圖片

icon -a 儀器 cor 個人 con 圖片 AC 默認 實現的效果： 默認狀態下： 點擊下面的標題時： html代碼： <h2>商品分類</h2> <div class="categories"> <ul cla

微信小程式之側邊欄滑動實現（附完整原始碼）

目錄 一、效果圖 二、原理解析 三、原始碼 四、專案下載 同類文章推薦： 更多幹貨關注公眾號： 一、效果圖 講什麼都不如直接上效果圖好，所以我們先來看下實現效果如何。 通過滑動螢幕，或者點選左上角的圖示按鈕，都能實現側邊欄的劃出效果。   &nb

小程式購物車功能（支援手動輸入數量）以及側邊欄和列表欄聯動的實現

小組剛完成一個小程式專案，第一版正式釋出了，過程中也遇到了很多問題，這裡記錄一下我負責的模組中的購物車功能的實現過程。後期再把其他小夥伴的模組也一併貼上來分析一下，自己也學習一下他們的獨門技能！效果圖如下： 在這裡，計數器、購物籃做成元件用於複用，由於左右聯動的功能

CSS3實現側邊欄快速定位的隱藏和消失

Dome <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3隱藏懸浮網站左側標籤式導航欄程式碼 </title>

Android側邊欄

android.support.v4.widget.DrawerLayout 跟佈局要使用androidv4包下的drawerlayout android:layout_gravity="start" 側邊欄的內容佈局要使用start private void ini

側邊欄 DrawerLayout佈局使用教程

首先我們使用DrawerLayout佈局: <android.support.v4.widget.DrawerLayout xmlns:android=“http://schemas.android.com/apk/res/android” android

android 新增側邊選單欄

側滑欄的新增： 什麼是側滑欄？大家應該很清楚就類似QQ,開啟主介面從手機最左側向右一劃就會出來側滑，以下圖為例向大家簡單介紹側滑欄的使用：              1.佈局裡的側滑控制元件：切記將側換控制元件NavigationView放在DrawerLayout中

Android系統定製的導航側邊欄

Android手機的導航欄一般都放在底部，導航按鍵包括返回鍵、home鍵、最近任務鍵。而有些Android裝置希望把導航欄放在左右兩邊，也就是改成側邊欄，這時候就需要二次定製開發。首先，把原生的底部導航欄遮蔽掉。然後，通過WindowManager新增懸浮的側邊欄，組合按鍵除