1准备图片
![这里写图片描述](https://img-blog.csdn.net/20170906215041546?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzY5NjQ2Nzc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
2建立layout_main_content.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:background="#FFF"
android:orientation="vertical" >
<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="Main Panel"
android:textSize="26dp" />
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#33ADCFD6"></item>
<item android:drawable="@android:color/transparent"/>
</selector>
4在style.xml中添加布局中的共同属性
<resources>
...
<style name="style_bt_text" parent="android:Widget.Holo.Light.TextView">
<item name="android:background">@drawable/selector_menu_bt_bg</item>
<item name="android:clickable">true</item>
<item name="android:drawablePadding">10dp</item>
<item name="android:gravity">center_vertical</item>
<item name="android:padding">8dp</item>
<item name="android:textColor">
<item name="android:textSize">18sp</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:onClick">onTabClick</item>
</style>
</resources>
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
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
android:id="@+id/news"
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>
/**
* 侧滑面板控件, 抽屉面板.
* @author poplar
*
* 测量 摆放 绘制
measure -> layout -> draw
| | |
onMeasure -> onLayout -> onDraw 重写这些方法, 实现自定义控件
View流程
onMeasure() (在这个方法里指定自己的宽高) -> onDraw() (绘制自己的内容)
ViewGroup流程
onMeasure() (指定自己的宽高, 所有子View的宽高)-> onLayout() (摆放所有子View) -> onDraw() (绘制内容)
*
*/
public class SlideMenu 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 SlideMenu(Context context) {
super(context);
init();
}
public SlideMenu(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public SlideMenu(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private void init() {
scroller = new Scroller(getContext());
}
/**
* 测量并设置 所有子View的宽高
* widthMeasureSpec: 当前控件的宽度测量规则
* heightMeasureSpec: 当前控件的高度测量规则
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
View leftMenu = getChildAt(0);
leftMenu.measure(leftMenu.getLayoutParams().width, heightMeasureSpec);
View mainContent = getChildAt(1);
mainContent.measure(widthMeasureSpec, heightMeasureSpec);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
/**
* changed: 当前控件的尺寸大小, 位置 是否发生了变化
* left:当前控件 左边距
* top:当前控件 顶边距
* right:当前控件 右边界
* bottom:当前控件 下边界
*/
@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);
}
/**
* 处理触摸事件
*/
@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);
int newScrollPosition = getScrollX() + scrollX;
if (newScrollPosition < -getChildAt(0).getMeasuredWidth()){
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){
dx = 0 - (-10) = 10
dx = -getChildAt(0).getMeasuredWidth() - startX;
} else {
dx = 0 - startX;
}
int duration = Math.abs(dx * 2);
scroller.startScroll(startX, 0, dx, 0, duration);
invalidate();
}
@Override
public void computeScroll() {
super.computeScroll();
if(scroller.computeScrollOffset()){
int currX = scroller.getCurrX();
System.out.println("currX: " + currX);
scrollTo(currX, 0);
invalidate();
}
}
public void open(){
currentState = MENU_STATE;
updateCurrentContent();
}
public void close(){
currentState = MAIN_STATE;
updateCurrentContent();
}
public void switchState(){
if(currentState == MAIN_STATE){
open();
}else {
close();
}
}
public int getCurrentState(){
return currentState;
}
/**
* 拦截判断
*/
@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);
}
}
7在activity_main中添加自定义控件
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<com.itheima74.sliding.ui.SlideMenu
android:id="@+id/sm"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<include layout="@layout/layout_left_menu"/>
<include layout="@layout/layout_main_content"/>"
</com.itheima74.sliding.ui.SlideMenu>
</RelativeLayout>
8在mainActivity中添加侧滑面板加载和点击处理
public class MainActivity extends Activity {
private SlideMenu sm;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
sm = (SlideMenu)findViewById(R.id.sm);
findViewById(R.id.ib_back).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
sm.switchState();
}
});
}
public void onTabClick(View view){
switch (view.getId()){
case R.id.news:
Toast.makeText(getApplicationContext(),"I is news",Toast.LENGTH_SHORT).show();
break;
default:
break;
}
}
}