Android自定義HorizontalScrollView實現qq側滑菜單

2019-10-23 18:32:37

字體：大中小

來源：轉載

供稿：網友

今天看了鴻洋_大神在慕課網講的qq5.0側滑菜單。學了不少的知識，同時也佩服鴻洋_大神思路的清晰。

看了教程課下也自己實現了一下。代碼幾乎完全相同別噴我啊。。沒辦法 o(︶︿︶)o 唉

android,自定義側滑菜單,horizontalscrollview,qq側滑菜單,android實現qq側滑菜單

像素不好沒辦法找不到好的制作gif的軟件。

我們暫且稱側滑左邊界面的為menu,右邊為content

首先是menu的布局

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="fill_parent"  android:layout_height="fill_parent"  android:background="@drawable/img_frame_background" >  <LinearLayout  android:layout_width="fill_parent"  android:layout_height="wrap_content"  android:layout_centerInParent="true"  android:orientation="vertical" >  <RelativeLayout  android:layout_width="fill_parent"  android:layout_height="wrap_content" >  <ImageView  android:id="@+id/image1"  android:layout_width="50dp"  android:layout_height="50dp"  android:layout_marginLeft="20dp"  android:src="@drawable/img_1" />  <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_toRightOf="@id/image1"  android:textColor="#ffffff"  android:layout_marginLeft="20dp"  android:text="第一個Item"  android:textSize="20sp" />  </RelativeLayout>  <RelativeLayout  android:layout_width="wrap_content"  android:layout_height="wrap_content" >  <ImageView  android:id="@+id/image2"  android:layout_width="50dp"  android:layout_height="50dp"  android:layout_marginLeft="20dp"  android:src="@drawable/img_2" />  <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_toRightOf="@id/image2"  android:textColor="#ffffff"  android:layout_marginLeft="20dp"  android:text="第二個Item"  android:textSize="20sp" />  </RelativeLayout>  <RelativeLayout  android:layout_width="wrap_content"  android:layout_height="wrap_content" >  <ImageView  android:id="@+id/image3"  android:layout_width="50dp"  android:layout_height="50dp"  android:layout_marginLeft="20dp"  android:src="@drawable/img_3" />  <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_toRightOf="@id/image3"  android:textColor="#ffffff"  android:layout_marginLeft="20dp"  android:text="第三個Item"  android:textSize="20sp" />  </RelativeLayout>  <RelativeLayout  android:layout_width="wrap_content"  android:layout_height="wrap_content" >  <ImageView  android:id="@+id/image4"  android:layout_width="50dp"  android:layout_height="50dp"  android:layout_marginLeft="20dp"  android:src="@drawable/img_4" />  <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_toRightOf="@id/image4"  android:textColor="#ffffff"  android:layout_marginLeft="20dp"  android:text="第四個Item"  android:textSize="20sp" />  </RelativeLayout> <RelativeLayout  android:layout_width="wrap_content"  android:layout_height="wrap_content" > <ImageView  android:id="@+id/image5"  android:layout_width="50dp"  android:layout_height="50dp"  android:layout_marginLeft="20dp"  android:src="@drawable/img_5" /> <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_toRightOf="@id/image5"  android:textColor="#ffffff"  android:layout_marginLeft="20dp"  android:text="第五個Item"  android:textSize="20sp" />  </RelativeLayout>  </LinearLayout> </RelativeLayout>

然后是主布局，一個水平滾動條，放入menu.xml，然后下面是一個線性垂直布局，背景是qq圖片

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="fill_parent"  android:layout_height="fill_parent" > <com.example.myhorizontalscrollview.MyHorizontalScrollView  android:layout_width="fill_parent"  android:layout_height="fill_parent"  android:scrollbars="none">  <LinearLayout  android:layout_width="wrap_content"  android:layout_height="fill_parent"  android:orientation="horizontal"  >  <include layout="@layout/menu" />  <LinearLayout  android:layout_width="fill_parent"  android:layout_height="fill_parent" android:background="@drawable/qq" />  </LinearLayout> </com.example.myhorizontalscrollview.MyHorizontalScrollView> </RelativeLayout>

其中的水平滾動條是我們自定義的view

需要重寫其中的兩個方法

@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); }

通過設置偏移量，調整我們的初始布局，使menu全部隱藏，右側菜單顯現

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  // TODO Auto-generated method stub  super.onMeasure(widthMeasureSpec, heightMeasureSpec); }

設置子view的寬

* 因為HorizontalScrollView自己控制move和down的事件

* 所以我們還要通過onTouchEvent判斷一下up.如果當前的x偏移量大于menu寬度的一半

* 隱藏menu，否則顯示menu 顯示的時候通過smoothScrollTo(x, y)方法來實現動畫的效果

下面是所有的自定義的HorizontalScrollView

package com.example.myhorizontalscrollview; import android.annotation.SuppressLint; import android.content.Context; import android.text.GetChars; import android.util.AttributeSet; import android.util.DisplayMetrics; import android.util.TypedValue; import android.view.MotionEvent; import android.view.ViewGroup; import android.view.WindowManager; import android.widget.HorizontalScrollView; import android.widget.LinearLayout; public class MyHorizontalScrollView extends HorizontalScrollView {  //滾動條中的水平先行布局  private LinearLayout mWrpper;  //水平線性布局的左側菜單menu  private ViewGroup mMenu;  //水平先行布局的右側線性布局  private ViewGroup mContent;  //屏幕的寬  private int mScreenWidth;  //menu的寬離屏幕右側的距離  private int mMenuRightPadding=50;  //menu的寬度  private int mMenuWidth;  private boolean once;  /**  * 未使用自定義屬性時調用  * */  public MyHorizontalScrollView(Context context, AttributeSet attrs) {  super(context, attrs);  /*  * 獲取屏幕的寬度  * 通過context拿到windowManager，在通過windowManager拿到Metrics,用DisplayMetrics接收  * */  WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);  DisplayMetrics outMetrics = new DisplayMetrics();  wm.getDefaultDisplay().getMetrics(outMetrics);  mScreenWidth=outMetrics.widthPixels;  //把dp轉換成px  mMenuRightPadding=(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50,  context.getResources().getDisplayMetrics());  }  /*  * 設置子view的寬和高  * */  @Override  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  // TODO Auto-generated method stub  if(!once){  mWrpper=(LinearLayout) getChildAt(0);  mMenu=(ViewGroup) mWrpper.getChildAt(0);  mContent=(ViewGroup) mWrpper.getChildAt(1);  //menu的寬度等于屏幕的寬度減去menu離屏幕右側的邊距  mMenuWidth=mMenu.getLayoutParams().width=mScreenWidth-mMenuRightPadding;  //右邊的先行布局的寬度直接等于屏幕的寬度  mContent.getLayoutParams().width=mScreenWidth;  once=true;  }  super.onMeasure(widthMeasureSpec, heightMeasureSpec);  }  /*  * 通過設置偏移量將menu隱藏  * */  @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);  /*  * 通過scrollTo（x,y）方法設置屏幕的偏移量，x為正  * 內容向左移動  * */  if(changed){  this.scrollTo(mMenuWidth, 0);  }  }  /*  * 因為HorizontalScrollView自己控制move和down的事件  * 所以我們還要判斷一下up.如果當前的x偏移量大于menu寬度的一半  * 隱藏menu，否則顯示menu  * */  @Override  public boolean onTouchEvent(MotionEvent ev) {  // TODO Auto-generated method stub  int action=ev.getAction();  switch(action){  case MotionEvent.ACTION_UP:  int scrollX=getScrollX();  if(scrollX>=mMenuWidth/2){  this.smoothScrollTo(mMenuWidth, 0);  }  else{  this.smoothScrollTo(0, 0);  }  return true;  }  return super.onTouchEvent(ev);  } }

然后就是MainActivity加載布局就可以

package com.example.slipping; import com.example.helloworld.R; import android.os.Bundle; import android.app.Activity; import android.view.Menu; public class MainActivity extends Activity {  @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);  } }

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持VEVB武林網！

注：相關教程知識閱讀請移步到Android開發頻道。

上一篇：Android中ImageView實現選擇本地圖片并顯示功能

下一篇：ionic2如何處理android硬件返回按鈕