Android自定義HorizontalScrollView實現(xiàn)qq側(cè)滑菜單
今天看了鴻洋_大神在慕課網(wǎng)講的qq5.0側(cè)滑菜單。學(xué)了不少的知識,同時也佩服鴻洋_大神思路的清晰。
看了教程課下也自己實現(xiàn)了一下。代碼幾乎完全相同 別噴我啊。。沒辦法 o(︶︿︶)o 唉
像素不好 沒辦法 找不到好的制作gif的軟件。
我們暫且稱側(cè)滑左邊界面的為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); }
通過設(shè)置偏移量,調(diào)整我們的初始布局,使menu全部隱藏,右側(cè)菜單顯現(xiàn)
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // TODO Auto-generated method stub super.onMeasure(widthMeasureSpec, heightMeasureSpec); }
設(shè)置子view的寬
* 因為HorizontalScrollView自己控制move和down的事件
* 所以我們還要通過onTouchEvent判斷一下up.如果當前的x偏移量大于menu寬度的一半
* 隱藏,否則顯示menu 顯示的時候通過smoothScrollTo(x, y)方法來實現(xiàn)動畫的效果
下面是所有的自定義的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; //水平線性布局的左側(cè)菜單menu private ViewGroup mMenu; //水平先行布局的右側(cè)線性布局 private ViewGroup mContent; //屏幕的寬 private int mScreenWidth; //menu的寬離屏幕右側(cè)的距離 private int mMenuRightPadding=50; //menu的寬度 private int mMenuWidth; private boolean once; /** * 未使用自定義屬性時調(diào)用 * */ 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轉(zhuǎn)換成px mMenuRightPadding=(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics()); } /* * 設(shè)置子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離屏幕右側(cè)的邊距 mMenuWidth=mMenu.getLayoutParams().width=mScreenWidth-mMenuRightPadding; //右邊的先行布局的寬度直接等于屏幕的寬度 mContent.getLayoutParams().width=mScreenWidth; once=true; } super.onMeasure(widthMeasureSpec, heightMeasureSpec); } /* * 通過設(shè)置偏移量將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)方法設(shè)置屏幕的偏移量,x為正 * 內(nèi)容向左移動 * */ if(changed){ this.scrollTo(mMenuWidth, 0); } } /* * 因為HorizontalScrollView自己控制move和down的事件 * 所以我們還要判斷一下up.如果當前的x偏移量大于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); } }
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
Android RadioGroup 設(shè)置某一個選中或者不可選中的方法
下面小編就為大家?guī)硪黄狝ndroid RadioGroup 設(shè)置某一個選中或者不可選中的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04Android定時器Timer的停止和重啟實現(xiàn)代碼
本篇文章主要介紹了Android實現(xiàn)定時器Timer的停止和重啟實現(xiàn),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08Android將Glide動態(tài)加載不同大小的圖片切圓角與圓形的方法
這篇文章主要給大家介紹了關(guān)于Android如何將Glide動態(tài)加載不同大小的圖片切圓角與圓形的方法,文中通過示例代碼介紹的非常吸納關(guān)系,對各位Android開發(fā)者們具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11Android convinientbanner頂部廣告輪播控件使用詳解
這篇文章主要為大家詳細介紹了Android convinientbanner頂部廣告輪播控件,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01Kotlin Channel處理多個數(shù)據(jù)組合的流
最近項目中對 kotlin 的使用比較多。不得不說 kotlin 確實可以極大的提高 android 的開發(fā)效率,channel用于協(xié)程之間的通訊,使用send和receive往通道里寫入或者讀取數(shù)據(jù),2個方法為非阻塞掛起函數(shù),channel是熱流,不管有沒有訂閱者都會發(fā)送2022-11-11Android使用getIdentifier()獲取資源Id的方法
這篇文章主要介紹了Android使用getIdentifier()獲取資源Id的方法,涉及Android針對控件資源的相關(guān)操作技巧,需要的朋友可以參考下2016-08-08