第3例：仿QQ滑动菜单
2018-06-26 本文已影响9人
追梦小乐
核心思想知识点：
1）、 自定义view的基本流程
2）、getScrollX()方法的理解以及使用
效果图如下
GIF.gif
功能实现过程
1、left_menu.xml（左侧菜单布局）
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--标题图片-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@drawable/left_title">
</LinearLayout>
<!--菜单部分-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:background="@drawable/left_bg">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="350dp"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@drawable/btn_bg"
android:drawableLeft="@drawable/img1"
android:drawablePadding="10dp"
android:gravity="center_vertical"
android:paddingLeft="20dp"
android:text="@string/text_1"
android:textSize="18sp" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@drawable/btn_bg"
android:drawableLeft="@drawable/img2"
android:drawablePadding="10dp"
android:gravity="center_vertical"
android:paddingLeft="20dp"
android:text="@string/text_2"
android:textSize="18sp" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@drawable/btn_bg"
android:drawableLeft="@drawable/img3"
android:drawablePadding="10dp"
android:gravity="center_vertical"
android:paddingLeft="20dp"
android:text="@string/text_3"
android:textSize="18sp" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@drawable/btn_bg"
android:drawableLeft="@drawable/img4"
android:drawablePadding="10dp"
android:gravity="center_vertical"
android:paddingLeft="20dp"
android:text="@string/text_4"
android:textSize="18sp" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@drawable/btn_bg"
android:drawableLeft="@drawable/img5"
android:drawablePadding="10dp"
android:gravity="center_vertical"
android:paddingLeft="20dp"
android:text="@string/text_5"
android:textSize="18sp" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@drawable/btn_bg"
android:drawableLeft="@drawable/img6"
android:drawablePadding="10dp"
android:gravity="center_vertical"
android:paddingLeft="20dp"
android:text="@string/text_6"
android:textSize="18sp" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@drawable/btn_bg"
android:drawableLeft="@drawable/img7"
android:drawablePadding="10dp"
android:gravity="center_vertical"
android:paddingLeft="20dp"
android:text="@string/text_7"
android:textSize="18sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
btn_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--设置按钮默认显示的图片-->
<item android:state_pressed="false" android:state_focused="false"
android:drawable="@drawable/btn_white" />
<!--设置按钮按下显示的图片-->
<item android:state_pressed="true" android:drawable="@drawable/btn_gray"/>
<!--设置按钮长按时显示的图片-->
<item android:state_focused="true" android:drawable="@drawable/btn_gray"/>
</selector>
2、QQMenu.java（自定义HorizontalScrollView）
public class QQMenu extends HorizontalScrollView {
private static final String TAG = QQMenu.class.getSimpleName();
private LinearLayout mScrollView; //定义横向滚动条布局
private ViewGroup mMenu; //定义菜单区域
private ViewGroup mContent; //定义主显示区域
private int mScreenWidth; //定义屏幕宽度
private int mMenuRightPadding = 50; //定义菜单右边距为50dp
private boolean call; //定义只设置一次自己和子视图的宽和高
private int mMenuWidth; //定义菜单宽度
public QQMenu(Context context, AttributeSet attrs) { //构造方法
super(context, attrs);
//获取窗口管理器服务
WindowManager wm = (WindowManager) context
.getSystemService(Context.WINDOW_SERVICE);
//创建显示尺寸对象
DisplayMetrics outMetrics = new DisplayMetrics();
//获取当前屏幕的宽高尺寸
wm.getDefaultDisplay().getMetrics(outMetrics);
//为屏幕宽度赋值
mScreenWidth = outMetrics.widthPixels;
//将50dp边距转为像素值px
mMenuRightPadding = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 50,
context.getResources().getDisplayMetrics());
}
//设置滚动视图与子视图的宽和高
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
Log.d(TAG,"onMeasure==============");
if (!call) { //用于判断只设置一次尺寸
mScrollView = (LinearLayout) getChildAt(0); //获取滚动视图中的子布局
mMenu = (ViewGroup) mScrollView.getChildAt(0); //获取菜单区域
mContent = (ViewGroup) mScrollView.getChildAt(1); //获取主显示区域
//设置菜单宽度
mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth
- mMenuRightPadding;
//设置主显示区域宽度
mContent.getLayoutParams().width = mScreenWidth;
call = true;
Log.d(TAG,"mScreenWidth========="+mScreenWidth);
Log.d(TAG,"mMenuWidth========="+mMenuWidth);
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
//设置偏移量让菜单隐藏
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
if (changed) {
Log.d(TAG,"onLayout==============");
//默认的布局：隐藏菜单栏、显示主内容区域
this.scrollTo(mMenuWidth, 0); //滚动条向右移动，主显示区域向左移动
}
}
//判断手指抬起时隐藏菜单还是显示菜单
//理解getScrollX()方法的含义：https://blog.csdn.net/znouy/article/details/51338256
@Override
public boolean onTouchEvent(MotionEvent ev) {
int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_UP:
Log.d(TAG,"onTouchEvent========MotionEvent.ACTION_UP=======");
int scrollX = getScrollX(); //隐藏左边的宽度
Log.d(TAG,"scrollX========="+scrollX);
Log.d(TAG,"mMenuWidth / 2========="+mMenuWidth / 2);
if (scrollX >= mMenuWidth / 2) { //如果隐藏左边的宽度大于菜单宽度的1/2时
this.smoothScrollTo(mMenuWidth, 0); //隐藏菜单
Log.d(TAG,"隐藏菜单=============");
} else {
this.smoothScrollTo(0, 0); //显示菜单
Log.d(TAG,"显示菜单=============");
}
return true;
}
return super.onTouchEvent(ev);
}
}
3、activity_main.xml（主布局文件）
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.mingrisoft.qqmenu.MainActivity">
<!--自定义横向滚动条-->
<com.example.qqmenu.QQMenu
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<include layout="@layout/left_menu" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg_main">
</LinearLayout>
</LinearLayout>
</com.example.qqmenu.QQMenu>
</RelativeLayout>
4、MainActivity.java
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
对getScrollX()的分析
结合上面代码的Log代码，注意看scrollX数值的变化，从而理解getScrollX()方法的含义
image.png
