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双向侧滑菜单