美文网首页
实现简单的侧滑

实现简单的侧滑

作者: Summer_27d1 | 来源:发表于2018-05-10 18:00 被阅读0次

    先创建一个包 ,包名package com.example.SlidingMeun.view 一个类 类名SlidingMeun。
    自定义布局,侧滑布局,实现的效果图
    ---------------效果图-----------


    image.png

    ···
    package com.example.SlidingMeun.view;

    import android.content.Context;
    import android.hardware.display.DisplayManager;
    import android.util.AttributeSet;
    import android.util.DisplayMetrics;
    import android.util.Log;
    import android.util.MonthDisplayHelper;
    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;
    /**

    自定义ViewGroup
    设置View的 宽和高

    /*/
    public class SlidingMeun extends HorizontalScrollView {//HorizontalScrollView水平滑动
    private LinearLayout mWapper;//水平滚动条
    private ViewGroup mMenu;//菜单栏的子类
    private ViewGroup mContent;//内容区域
    private int mScreenWidth;//屏幕的宽度
    private int mMenuRightPadding=50;//侧滑与右侧的距离
    private boolean once;
    private int mMenuWidth;//菜单宽度
    public SlidingMeun(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;
        
    //把dp转化为Px(像素)
        //通过TypedValue.applyDimension转换成了像素值
        mMenuRightPadding=(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics());
    }
    //设置View的   宽和高就是设置自己的宽和高
    protected void onMeasure(int widthMeasureSpec,int heightMeasureSpec){
        if (!once) {
              //获得(com.example.aiqiyi.view_ui.Sidngmenu)里面的布局
            mWapper=(LinearLayout) getChildAt(0);//
            mMenu=(ViewGroup) mWapper.getChildAt(0);//LinearLayout的第一个元素
            mContent =(ViewGroup) mWapper.getChildAt(1);//LinearLayout的第二个元素
            
            //设置宽度    meun的宽度=屏幕的宽度-侧滑与右侧的距离的宽度
            mMenuWidth=mMenu.getLayoutParams().width=mScreenWidth-mMenuRightPadding;
            //内容区域的宽度=屏幕的宽度
            mContent.getLayoutParams().width=mScreenWidth;
        
       
            
        once =true;
        }
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    
    }
    //通过设置偏移量  将menu隐藏 左侧
    //决定View的摆放位置
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        
        super.onLayout(changed, l, t, r, b);
        if (changed) {//隐藏menu
        this.scrollTo(mMenuWidth, 0);//将menu隐藏 左侧
        //x为正值时滚动态向右移动    内容区向左移动
        }
      
    }
    

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
    int action=ev.getAction();//按下抬起
    switch (action) {//判断用户的操作
    case MotionEvent.ACTION_UP:
    //隐藏在左边的宽度
    int scrollX = getScrollX();
    if (scrollX >= mScreenWidth /2) {//scrollX大于mMenuWidth的一半
    //smoothScrollTo(x, y);慢慢隐藏
    this.smoothScrollTo(mMenuWidth, 0);

        }else{//显示
        this.smoothScrollTo(0, 0);  
        }
        return true;
    
    }
    return super.onTouchEvent(ev);
    

    }
    }

    ···

    ···
    <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">

    <com.example.SlidingMeun.view.SlidingMeun
    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/ic_beijing"
    ></LinearLayout>

       </LinearLayout>
    

    </com.example.SlidingMeun.view.SlidingMeun>
    </RelativeLayout>

    ···
    lef.xml
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/beij"
    >

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:orientation="vertical"

        >
      <RelativeLayout 
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          >
          <!-- 
           android:layout_centerVertical="true" 
                                    居中垂直
           -->
          <ImageView 
            android:id="@+id/id_1"
           android:layout_width="50dp"
           android:layout_height="50dp"  
           android:layout_marginLeft="20dp"
           android:layout_marginTop="20dp" 
            android:layout_centerVertical="true"
            android:src="@drawable/ic_tubiao2"
            
              />
          <TextView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/id_1"
     android:text="第一个按钮"
     android:layout_centerVertical="true"
     android:textSize="20sp"
     android:textColor="#ffffff"
     android:layout_marginLeft="20dp"
              />
      </RelativeLayout>
      <RelativeLayout 
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          >
          <ImageView 
            android:id="@+id/id_2"
           android:layout_width="50dp"
           android:layout_height="50dp"  
           android:layout_marginLeft="20dp"
           android:layout_marginTop="20dp" 
            android:layout_centerVertical="true"
            android:src="@drawable/ic_tubiao3"
            
              />
          <TextView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/id_2"
     android:text="第二个按钮"
     android:layout_centerVertical="true"
     android:textSize="20sp"
     android:textColor="#ffffff"
     android:layout_marginLeft="20dp"
              />
          
      </RelativeLayout>
      <RelativeLayout 
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          >
          <ImageView 
            android:id="@+id/id_3"
           android:layout_width="50dp"
           android:layout_height="50dp"  
           android:layout_marginLeft="20dp"
           android:layout_marginTop="20dp" 
            android:layout_centerVertical="true"
            android:src="@drawable/ic_tubiao4"
            
              />
          <TextView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/id_3"
     android:text="第三个按钮"
     android:layout_centerVertical="true"
     android:textSize="20sp"
     android:textColor="#ffffff"
     android:layout_marginLeft="20dp"
              />
      </RelativeLayout>
      
     </LinearLayout>
    

    </RelativeLayout>

    image.png

    atvity.xml

    相关文章

      网友评论

          本文标题:实现简单的侧滑

          本文链接:https://www.haomeiwen.com/subject/dcktdftx.html