Android 自定义HorizontalScrollView抽屉
自定义的简要:
1.自定义需要牢记的三个方法 onMeasure(); onLayout (); onDraw();
注意事项:
1.布局的应用
2.构造方法不可以缺少
MySlidingMenu
package com.example.hscrollsrecycleview_demo;
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
public class MySlidingMenu extends HorizontalScrollView{
private int ScreeWidth;//屏幕的宽度
private int contentWidth;//内容区域宽度
private int menuWidth;//菜单宽度
private int halfMenuWidth;//菜单一半的宽度
private int rightPadding;//菜单的右边距
private boolean isMeasue;
private boolean isOpen;//是否打开菜单
public MySlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// 获取视图管理器
WindowManager wm=(WindowManager)
context.getSystemService(Context.WINDOW_SERVICE);
//获取手机分辨率
DisplayMetrics dm=new DisplayMetrics();
//获取屏幕的大小
wm.getDefaultDisplay().getMetrics(dm);
//widthPixels 是屏幕宽度方向上像素点的个数
ScreeWidth = dm.widthPixels;
//自定义属性
TypedArray typed=context.getTheme().obtainStyledAttributes(attrs,
R.styleable.MySlidingMenu, defStyleAttr, 0);
int count = typed.getIndexCount();
for (int i = 0; i < count; i++) {
int index = typed.getIndex(i);
switch (index) {
case R.styleable.MySlidingMenu_rightPadding:
rightPadding=typed.getDimensionPixelOffset(index,
(int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 200,
getResources().getDisplayMetrics()));
break;
}
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// TODO Auto-generated method stub
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if(!isMeasue){
isMeasue=true;
LinearLayout line=(LinearLayout) getChildAt(0);
ViewGroup childAt = (ViewGroup) line.getChildAt(0);
ViewGroup context = (ViewGroup) line.getChildAt(1);
//抽屉菜单的宽度
menuWidth=ScreeWidth-rightPadding;
//抽屉一半的距离
halfMenuWidth=menuWidth/2;
//获取菜单属性布局的宽度
childAt.getLayoutParams().width=menuWidth;
//主布局的宽度=屏幕的宽度
context.getLayoutParams().width=ScreeWidth;
}
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
// TODO Auto-generated method stub
super.onLayout(changed, l, t, r, b);
if(changed){
//(让ScrollView滚动到(menuWidth, 0)的位置,也就是刚好显示主视图)不带效果的滑动
this.scrollTo(menuWidth, 0);
}
}
public MySlidingMenu(Context context, AttributeSet attrs) {
this(context, attrs,0);
// WindowManager wm = (WindowManager) context
// .getSystemService(Context.WINDOW_SERVICE);
//
// DisplayMetrics outMetrics = new DisplayMetrics();
//
// wm.getDefaultDisplay().getMetrics(outMetrics);
// ScreenWidth = outMetrics.widthPixels;
}
public MySlidingMenu(Context context) {
this(context, null, 0);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_UP:
//就是当前view的左上角相对于母视图的左上角的X轴偏移量。
int scrollX = getScrollX();
if(scrollX>halfMenuWidth){
this.smoothScrollTo(menuWidth, 0);
}else{
this.smoothScrollTo(0, 0);
}
return true;
}
return super.onTouchEvent(ev);
}
public void openDraw(){
if(isOpen){
return;
}
//让ScrollView滚动到(0,0)的位置
this.smoothScrollTo(0, 0);
isOpen=true;
}
public void close(){
if(isOpen){
//让ScrollView滚动到(menuWidth,0)的位置
//带效果的滑动
this.smoothScrollTo(menuWidth, 0);
isOpen=false;
}
}
public void togle(){
if(isOpen){
close();
}else{
openDraw();
}
}
}
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
public class MySlidingMenu extends HorizontalScrollView{
private int ScreeWidth;//屏幕的宽度
private int contentWidth;//内容区域宽度
private int menuWidth;//菜单宽度
private int halfMenuWidth;//菜单一半的宽度
private int rightPadding;//菜单的右边距
private boolean isMeasue;
private boolean isOpen;//是否打开菜单
public MySlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// 获取视图管理器
WindowManager wm=(WindowManager)
context.getSystemService(Context.WINDOW_SERVICE);
//获取手机分辨率
DisplayMetrics dm=new DisplayMetrics();
//获取屏幕的大小
wm.getDefaultDisplay().getMetrics(dm);
//widthPixels 是屏幕宽度方向上像素点的个数
ScreeWidth = dm.widthPixels;
//自定义属性
TypedArray typed=context.getTheme().obtainStyledAttributes(attrs,
R.styleable.MySlidingMenu, defStyleAttr, 0);
int count = typed.getIndexCount();
for (int i = 0; i < count; i++) {
int index = typed.getIndex(i);
switch (index) {
case R.styleable.MySlidingMenu_rightPadding:
rightPadding=typed.getDimensionPixelOffset(index,
(int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 200,
getResources().getDisplayMetrics()));
break;
}
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// TODO Auto-generated method stub
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if(!isMeasue){
isMeasue=true;
LinearLayout line=(LinearLayout) getChildAt(0);
ViewGroup childAt = (ViewGroup) line.getChildAt(0);
ViewGroup context = (ViewGroup) line.getChildAt(1);
//抽屉菜单的宽度
menuWidth=ScreeWidth-rightPadding;
//抽屉一半的距离
halfMenuWidth=menuWidth/2;
//获取菜单属性布局的宽度
childAt.getLayoutParams().width=menuWidth;
//主布局的宽度=屏幕的宽度
context.getLayoutParams().width=ScreeWidth;
}
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
// TODO Auto-generated method stub
super.onLayout(changed, l, t, r, b);
if(changed){
//(让ScrollView滚动到(menuWidth, 0)的位置,也就是刚好显示主视图)不带效果的滑动
this.scrollTo(menuWidth, 0);
}
}
public MySlidingMenu(Context context, AttributeSet attrs) {
this(context, attrs,0);
// WindowManager wm = (WindowManager) context
// .getSystemService(Context.WINDOW_SERVICE);
//
// DisplayMetrics outMetrics = new DisplayMetrics();
//
// wm.getDefaultDisplay().getMetrics(outMetrics);
// ScreenWidth = outMetrics.widthPixels;
}
public MySlidingMenu(Context context) {
this(context, null, 0);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_UP:
//就是当前view的左上角相对于母视图的左上角的X轴偏移量。
int scrollX = getScrollX();
if(scrollX>halfMenuWidth){
this.smoothScrollTo(menuWidth, 0);
}else{
this.smoothScrollTo(0, 0);
}
return true;
}
return super.onTouchEvent(ev);
}
public void openDraw(){
if(isOpen){
return;
}
//让ScrollView滚动到(0,0)的位置
this.smoothScrollTo(0, 0);
isOpen=true;
}
public void close(){
if(isOpen){
//让ScrollView滚动到(menuWidth,0)的位置
//带效果的滑动
this.smoothScrollTo(menuWidth, 0);
isOpen=false;
}
}
public void togle(){
if(isOpen){
close();
}else{
openDraw();
}
}
}
MainActivity
package com.example.hscrollsrecycleview_demo;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
public class MainActivity extends Activity {
private Button mBtn;
private MySlidingMenu mSliding;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
mBtn=(Button) findViewById(R.id.mBtn);
mSliding=(MySlidingMenu) findViewById(R.id.mSliding);
mBtn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mSliding.togle();
}
});
}
}
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
public class MainActivity extends Activity {
private Button mBtn;
private MySlidingMenu mSliding;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
mBtn=(Button) findViewById(R.id.mBtn);
mSliding=(MySlidingMenu) findViewById(R.id.mSliding);
mBtn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mSliding.togle();
}
});
}
}
//以下是xml布局
activity_main
<com.example.hscrollsrecycleview_demo.MySlidingMenu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:myslide="http://schemas.android.com/apk/res/com.example.hscrollsrecycleview_demo"
android:layout_width="match_parent"
android:id="@+id/mSliding"
android:layout_height="match_parent"
myslide:rightPadding="100dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<include layout="@layout/menu" />
<RelativeLayout
android:id="@+id/mRelative"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/home" >
<Button
android:id="@+id/mBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="菜单" />
</RelativeLayout>
</LinearLayout>
</com.example.hscrollsrecycleview_demo.MySlidingMenu>
xmlns:tools="http://schemas.android.com/tools"
xmlns:myslide="http://schemas.android.com/apk/res/com.example.hscrollsrecycleview_demo"
android:layout_width="match_parent"
android:id="@+id/mSliding"
android:layout_height="match_parent"
myslide:rightPadding="100dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<include layout="@layout/menu" />
<RelativeLayout
android:id="@+id/mRelative"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/home" >
<Button
android:id="@+id/mBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="菜单" />
</RelativeLayout>
</LinearLayout>
</com.example.hscrollsrecycleview_demo.MySlidingMenu>
menu
<?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"
android:gravity="center"
android:background="@drawable/img_frame_background">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:gravity="center">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="10dp"
android:src="@drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="第1个item"
android:textColor="#ffffff"
android:textSize="18sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:gravity="center">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="10dp"
android:src="@drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="第2个item"
android:textColor="#ffffff"
android:textSize="18sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:gravity="center">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="10dp"
android:src="@drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="第3个item"
android:textColor="#ffffff"
android:textSize="18sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:gravity="center">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="10dp"
android:src="@drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="第4个item"
android:textColor="#ffffff"
android:textSize="18sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:gravity="center">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="10dp"
android:src="@drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="第5个item"
android:textColor="#ffffff"
android:textSize="18sp"/>
</LinearLayout>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:background="@drawable/img_frame_background">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:gravity="center">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="10dp"
android:src="@drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="第1个item"
android:textColor="#ffffff"
android:textSize="18sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:gravity="center">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="10dp"
android:src="@drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="第2个item"
android:textColor="#ffffff"
android:textSize="18sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:gravity="center">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="10dp"
android:src="@drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="第3个item"
android:textColor="#ffffff"
android:textSize="18sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:gravity="center">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="10dp"
android:src="@drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="第4个item"
android:textColor="#ffffff"
android:textSize="18sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:gravity="center">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="10dp"
android:src="@drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="第5个item"
android:textColor="#ffffff"
android:textSize="18sp"/>
</LinearLayout>
</LinearLayout>
以下是values 下面的代码:
attrs
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="rightPadding" format="dimension"></attr>
<declare-styleable name="MySlidingMenu">
<attr name="rightPadding" />
</declare-styleable>
</resources>
<resources>
<attr name="rightPadding" format="dimension"></attr>
<declare-styleable name="MySlidingMenu">
<attr name="rightPadding" />
</declare-styleable>
</resources>