android DrawerLayout 侧边栏实现

现在实现侧边栏比较简单了，官方提供的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>

参考博客
DrawerLayout 抽屉
 Android DrawerLayout 高仿QQ5.2双向侧滑菜单

巴特西

android DrawerLayout 侧边栏实现

最新文章

热门文章