版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/tiger_gy/article/details/88576990
自定义侧滑面板SlideView
最近新学了一个自定义的侧滑面板，感觉挺好玩的。记录下来 方便以后查看。效果图如下：
1. 在xml布局里摆放内容. include
2. 在自定义ViewGroup里, 进行measure测量, layout布局
3. 响应用户的触摸事件
4. int scrollX = (int) (downX - moveX);
5. getScrollX()获取当前滚动到的位置
6. 平滑动画
MainActivity.java
package com.hz.sliding;
import android.app.Activity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.FitWindowsViewGroup;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.Toast;
import com.hz.sliding.View.SlideView;
public class MainActivity extends Activity implements View.OnClickListener {
private SlideView sm;
private ImageButton ibBack;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
sm = (SlideView) findViewById(R.id.sm);
ibBack = (ImageButton) findViewById(R.id.ib_back);
ibBack.setOnClickListener(this);
}
public void onTabClick(View view){
}
/**
* Called when a view has been clicked.
*
* @param v The view that was clicked.
*/
@Override
public void onClick(View v) {
sm.switchState();
}
}
SlideView.java
package com.hz.sliding.View;
import android.content.Context;
import android.content.IntentFilter;
import android.util.AttributeSet;
import android.util.EventLog;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Scroller;
/**
* * 侧滑面板控件, 抽屉面板.
* 测量 摆放 绘制
*measure -> layout -> draw
*| | |
*onMeasure -> onLayout -> onDraw 重写这些方法, 实现自定义控件
*
*View流程
*onMeasure() (在这个方法里指定自己的宽高) -> onDraw() (绘制自己的内容)
*ViewGroup流程
*onMeasure() (指定自己的宽高, 所有子View的宽高)-> onLayout() (摆放所有子View) -> onDraw() (绘制内容)
* Created by Administrator on 2019/3/13.
*/
public class SlideView extends ViewGroup {
private float downX;
private float downY;
private float moveX;
public static final int MAIN_STATE = 0;
public static final int MENU_STATE = 1;
private int currentState = MAIN_STATE; // 当前模式
private Scroller scroller;
public SlideView(Context context) {
super(context);
init();
}
public SlideView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public SlideView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
// 初始化滚动器, 数值模拟器
scroller = new Scroller(getContext());
}
/**
* * 测量并设置 所有子View的宽高
* @param widthMeasureSpec 当前控件的宽度测量规则
* @param heightMeasureSpec 当前控件的高度测量规则
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 指定左面板的宽高
View leftMenu=getChildAt(0);
leftMenu.measure(leftMenu.getLayoutParams().width,heightMeasureSpec);
// 指定主面板的宽高
View mainMenu=getChildAt(1);
mainMenu.measure(widthMeasureSpec,heightMeasureSpec);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
/**
* @param changed 当前控件的尺寸大小, 位置 是否发生了变化 \
* @param l 当前控件 左边距
* @param t 当前控件 顶边距
* @param r 当前控件 右边界
* @param b 当前控件 下边界
*/
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
View leftMenu=getChildAt(0);
leftMenu.layout(-leftMenu.getMeasuredWidth(),0,0,b);
getChildAt(1).layout(l,t,r,b);
}
/**
* 处理触摸按键
* @param event
* @return
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
downX =event.getX();
break;
case MotionEvent.ACTION_MOVE:
moveX =event.getX();
// 将要发生的偏移量/变化量
int scrollX= (int) (downX-moveX);
// 计算将要滚动到的位置, 判断是否会超出去, 超出去了.不执行scrollBy
// getScrollX() 当前滚动到的位置
int newScrollPosition = getScrollX() + scrollX;
if (newScrollPosition<-getChildAt(0).getMeasuredWidth()){// 限定左边界
// < -240
scrollTo(-getChildAt(0).getMeasuredWidth(), 0);
}else if (newScrollPosition>0){//限定右边界
scrollTo(0,0);
}else {
scrollBy(scrollX,0);
}
downX = moveX;
break;
case MotionEvent.ACTION_UP:
// 根据当前滚动到位置，和左面板一般进行比较
int leftCenter=(int) (- getChildAt(0).getMeasuredWidth() / 2.0f);
if (getScrollX()<leftCenter){
// 打开, 切换成菜单面板
currentState=MENU_STATE;
updateCurrentContent();
}else {
// 关闭, 切换成主面板
currentState=MAIN_STATE;
updateCurrentContent();
}
break;
default:
break;
}
return true; // 消费事件
}
/**
* 根据当前的状态, 执行 关闭/开启 的动画
*/
private void updateCurrentContent() {
int startX=getScrollX();
int dx=0;// 移动的距离
if (currentState==MENU_STATE){ // 滑出菜单
// 打开菜单
//scrollTo(-getChildAt(0).getMeasuredWidth(), 0);
//dx = 结束位置(-240) - 开始位置(-200) = -40
//dx = 0 - (-10) = 10
dx=-getChildAt(0).getMeasuredWidth()-startX;
}else { // 关闭菜单
//scrollTo(0, 0);
dx=0-startX;
}
// startX: 开始的x值
// startY: 开始的y值
// dx: 将要发生的水平变化量. 移动的x距离
// dy: 将要发生的竖直变化量. 移动的y距离
// duration : 数据模拟持续的时长
// 1. 开始平滑的数据模拟
int duration = Math.abs(dx * 2); // 0 -> 1200
scroller.startScroll(startX,0,dx,0,duration);
invalidate();// 重绘界面 -> drawChild() -> computeScroll();
}
//2. 维持动画的继续
@Override
public void computeScroll() {
super.computeScroll();
if(scroller.computeScrollOffset()){ // 直到duration事件以后, 结束
// true, 动画还没有结束
// 获取当前模拟的数据, 也就是要滚动到的位置
int currX = scroller.getCurrX();
scrollTo(currX, 0); // 滚过去
invalidate(); // 重绘界面-> drawChild() -> computeScroll();循环
}
}
/**
* 点击左上角图标的方法
*/
public void switchState(){
if (currentState==MAIN_STATE){
open();
}else {
close();
}
}
/**
* 移动出来的方法
*/
private void open(){
currentState=MENU_STATE;
updateCurrentContent();
}
/**
* 关闭的方法
*/
private void close() {
currentState=MAIN_STATE;
updateCurrentContent();
}
/**
* 拦截判断
*/
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = ev.getX();
downY = ev.getY();
break;
case MotionEvent.ACTION_MOVE:
float xOffset = Math.abs(ev.getX() - downX);
float yOffset = Math.abs(ev.getY() - downY);
if(xOffset > yOffset && xOffset > 5){ // 水平方向超出一定距离时,才拦截
return true; // 拦截此次触摸事件, 界面的滚动
}
break;
case MotionEvent.ACTION_UP:
break;
default:
break;
}
return super.onInterceptTouchEvent(ev);
}
}
selector_menu_bt_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@color/bt_bg_pressed"></item>
<item android:drawable="@android:color/transparent"/>
</selector>activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.hz.sliding.MainActivity">
<com.hz.sliding.View.SlideView
android:id="@+id/sm"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="@layout/layout_left_menu"></include>
<include layout="@layout/layout_main_content"></include>
</com.hz.sliding.View.SlideView>
</RelativeLayout>
layout_left_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="240dp"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:background="@drawable/menu_bg"
android:orientation="vertical">
<TextView
style="@style/style_bt_text"
android:drawableLeft="@drawable/tab_news"
android:text="新闻"/>
<TextView
style="@style/style_bt_text"
android:drawableLeft="@drawable/tab_read"
android:text="订阅" />
<TextView
style="@style/style_bt_text"
android:drawableLeft="@drawable/tab_local"
android:text="本地" />
<TextView
style="@style/style_bt_text"
android:drawableLeft="@drawable/tab_ties"
android:text="跟帖" />
<TextView
style="@style/style_bt_text"
android:drawableLeft="@drawable/tab_pics"
android:text="图片" />
<TextView
style="@style/style_bt_text"
android:drawableLeft="@drawable/tab_ugc"
android:text="话题" />
<TextView
style="@style/style_bt_text"
android:drawableLeft="@drawable/tab_vote"
android:text="投票" />
<TextView
style="@style/style_bt_text"
android:drawableLeft="@drawable/tab_focus"
android:text="聚合阅读" />
</LinearLayout>
</ScrollView>layout_main_content.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="#FFF"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/top_bar_bg"
android:orientation="horizontal" >
<ImageButton
android:id="@+id/ib_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@null"
android:src="@drawable/main_back" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="@drawable/top_bar_divider" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="10dp"
android:text="新闻热点"
android:textColor="#FFF"
android:textSize="24sp" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="白日依山尽,黄河入海流。欲穷千里目，疑是地上霜。."
android:textSize="26dp" />
</LinearLayout>