Android5.0多種側(cè)滑欄效果實(shí)例代碼
更新時間：2016年09月21日 15:14:19 作者：適妸洏沚
這篇文章主要介紹了Android5.0多種側(cè)滑欄效果實(shí)例代碼的相關(guān)資料,本文圖文并茂介紹的非常詳細(xì)，需要的朋友可以參考下
1.普通側(cè)滑
效果圖：
思路：通過自定義View繼承HorizontalScrollView，然后重寫onMeasure(),onLayout(),onTouchEvent()
方法并設(shè)置menu(通過動畫使menu開始時處于隱藏狀態(tài))布局和content布局。(注意：使用ViewHelper類需要導(dǎo)入nineoldandroids-2.4.0.jar包)
menu(left_menu)布局代碼:
<?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"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_centerInParent="true"> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/id_img1" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="20dp" android:layout_marginTop="20dp" android:layout_centerVertical="true" android:src="@mipmap/img_1"/> <TextView android:id="@+id/iv_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="第一個item" android:textSize="21sp" android:textColor="#ffffff" android:layout_toRightOf="@+id/id_img1" android:layout_marginLeft="20dp" android:layout_centerVertical="true"/> </RelativeLayout> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/id_img2" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="20dp" android:layout_marginTop="20dp" android:layout_centerVertical="true" android:src="@mipmap/img_2"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="第二個item" android:textSize="21sp" android:textColor="#ffffff" android:layout_toRightOf="@+id/id_img2" android:layout_marginLeft="20dp" android:layout_centerVertical="true"/> </RelativeLayout> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/id_img3" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="20dp" android:layout_marginTop="20dp" android:layout_centerVertical="true" android:src="@mipmap/img_3"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="第三個item" android:textSize="21sp" android:textColor="#ffffff" android:layout_toRightOf="@+id/id_img3" android:layout_marginLeft="20dp" android:layout_centerVertical="true"/> </RelativeLayout> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/id_img4" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="20dp" android:layout_marginTop="20dp" android:layout_centerVertical="true" android:src="@mipmap/img_4"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="第四個item" android:textSize="21sp" android:textColor="#ffffff" android:layout_toRightOf="@+id/id_img4" android:layout_marginLeft="20dp" android:layout_centerVertical="true"/> </RelativeLayout> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/id_img5" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="20dp" android:layout_marginTop="20dp" android:layout_centerVertical="true" android:src="@mipmap/img_5"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="第五個item" android:textSize="21sp" android:textColor="#ffffff" android:layout_toRightOf="@+id/id_img5" android:layout_marginLeft="20dp" android:layout_centerVertical="true"/> </RelativeLayout> </LinearLayout> </RelativeLayout>
content(activity_main)布局代碼：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:hyname="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@mipmap/img_frame_background"> <com.imooc.view.SlidingMenu android:id="@+id/id_menu" android:layout_width="match_parent" android:layout_height="match_parent" hyname:rightPadding="100dp"> <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:orientation="vertical" android:background="@mipmap/qq"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="切換菜單" android:onClick="toogleMenu" android:textSize="21sp"/> </LinearLayout> </LinearLayout> </com.imooc.view.SlidingMenu> </LinearLayout>
自定義attr.xml文件代碼：
<?xml version="1.0" encoding="utf-8"?> <resources> <attr name="rightPadding" format="dimension"/> <declare-styleable name="SlidingMenu"> <attr name="rightPadding"></attr> </declare-styleable> </resources>
自定義SlidingMenu代碼：
public class SlidingMenu extends HorizontalScrollView {
private LinearLayout mWapper;
private ViewGroup mMenu;//菜單布局
private ViewGroup mContent;//內(nèi)容布局
private int mScreenWidth;//屏幕寬度
private int mMenuRightPadding=50;
private boolean once;
private int mMenuWidth;
private boolean isOpen;
public SlidingMenu(Context context) {
this(context, null);
}
/**
* 未使用自定義屬性時，調(diào)用
* @param context
* @param attrs
*/
public SlidingMenu(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
/**
* 自定義了屬性且使用時，調(diào)用次構(gòu)造方法
* @param context
* @param attrs
* @param defStyleAttr
*/
public SlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//獲取定義的屬性的數(shù)組
TypedArray typedValue=context.getTheme().obtainStyledAttributes(attrs, R.styleable.SlidingMenu, defStyleAttr, 0);
int n=typedValue.getIndexCount();
for (int i=0;i<n;i++){
int attr=typedValue.getIndex(i);
switch (attr){
case R.styleable.SlidingMenu_rightPadding:
mMenuRightPadding=typedValue.getDimensionPixelSize(attr,(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,50,context.getResources().getDisplayMetrics()));
break;
}
}
typedValue.recycle();
WindowManager mg= (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
//初始化屏幕信息對象
DisplayMetrics outMetrics=new DisplayMetrics();
//把屏幕的信息存儲到DisplayMetrics中
mg.getDefaultDisplay().getMetrics(outMetrics);
//獲取屏幕寬度賦值給mScreenWidth
mScreenWidth=outMetrics.widthPixels;
}
/**
* 設(shè)置子view的寬和高
* 設(shè)置自己的寬和高
* @param widthMeasureSpec
* @param heightMeasureSpec
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if(!once){
//獲取SlidingMenu中的Linearlayout布局
mWapper= (LinearLayout) getChildAt(0);
//獲取LinearLayout中的menu布局
mMenu= (ViewGroup) mWapper.getChildAt(0);
//獲取LinearLayout中的Content布局
mContent= (ViewGroup) mWapper.getChildAt(1);
//獲取menu寬度
mMenuWidth= mMenu.getLayoutParams().width=mScreenWidth-mMenuRightPadding;
//設(shè)置content的寬度
mContent.getLayoutParams().width=mScreenWidth;
mWapper.getLayoutParams().width=mScreenWidth;
once=true;
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
/**
* 通過設(shè)置偏移量，將menu隱藏
* @param changed
* @param l
* @param t
* @param r
* @param b
*/
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
if(changed){
this.scrollTo(mMenuWidth,0);
}
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()){
case MotionEvent.ACTION_UP:
//隱藏在左邊的寬度
int scrollX=getScrollX();
if (scrollX>=mMenuWidth/2){
this.smoothScrollTo(mMenuWidth,0);
isOpen=false;
}else {
this.smoothScrollTo(0,0);
isOpen=true;
}
return true;
}
return super.onTouchEvent(ev);
}
public void openMenu(){
if(isOpen)return;
this.smoothScrollTo(0,0);
isOpen=true;
}
public void closeMenu(){
if(!isOpen)return;
this.smoothScrollTo(mMenuWidth,0);
isOpen=false;
}
//切換菜單
public void toggle(){
if(isOpen){
closeMenu();
}else {
openMenu();
}
}
}
主文件代碼：
public class MainActivity extends AppCompatActivity {
private SlidingMenu mleftMenu;
private TextView textView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mleftMenu= (SlidingMenu) findViewById(R.id.id_menu);
textView= (TextView) findViewById(R.id.iv_text);
//menu的第一個Item的點(diǎn)擊事件，可不寫
textView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mleftMenu.toggle();
}
});
}
public void toogleMenu(View view){
mleftMenu.toggle();
}
}
2.抽屜式側(cè)滑(一)
效果圖：
思路：在原來的基礎(chǔ)上，在自定義View文件中重寫onScrollChanged()方法
添加代碼：
/**
* 滾動時發(fā)生
* @param l
* @param t
* @param oldl
* @param oldt
*/
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
//調(diào)用屬性動畫，設(shè)置TranslateX,l值為menu隱藏的寬度,menu由完全隱藏變?yōu)橥耆梢?，變化梯?scale由1~0,menu偏移量由大到小；
float scale=l*1.0f/mMenuWidth; //1~0
ViewHelper.setTranslationX(mMenu, mMenuWidth * scale);
}
3.抽屜式側(cè)滑(二)
效果圖：
思路：在一的基礎(chǔ)上通過設(shè)置menu的縮放效果，content的縮放效果和縮放中心實(shí)現(xiàn)。
實(shí)現(xiàn)代碼：
/**
* 滾動發(fā)生
* @param l
* @param t
* @param oldl
* @param oldt
*/
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
//調(diào)用屬性動畫，設(shè)置TranslateX,l值為menu隱藏的寬度,menu由完全隱藏變?yōu)橥耆梢?，變化梯度scale由1~0,menu偏移量由大到?。?
float scale=l*1.0f/mMenuWidth; //1~0
// ViewHelper.setTranslationX(mMenu, mMenuWidth * scale);
float leftScale=1.0f-scale*0.3f; //0.7~1.0
float leftAlpha=0.6f+0.4f*(1-scale); //0.6~1.0
float rightScale=0.7f+0.3f*scale; //1.0~0.7
//縮放動畫0.7~1.0
ViewHelper.setScaleX(mMenu, leftScale);
ViewHelper.setScaleY(mMenu, leftScale);
//透明度變化0.6~1.0
ViewHelper.setAlpha(mMenu, leftAlpha);
ViewHelper.setTranslationX(mMenu, mMenuWidth * scale * 0.7f);
ViewHelper.setPivotX(mContent, 0);
ViewHelper.setPivotY(mContent, mContent.getHeight() / 2);
//縮放動畫1.0~0.7
ViewHelper.setScaleX(mContent, rightScale);
ViewHelper.setScaleY(mContent,rightScale);
}
以上所述是小編給大家介紹的Android5.0多種側(cè)滑欄效果實(shí)例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
本文主要對Android中三種POST和GET的提交方式進(jìn)行詳細(xì)介紹。通過任何一種方式可以實(shí)現(xiàn)的功能是，從安卓手機(jī)端提交數(shù)據(jù)到服務(wù)器端，服務(wù)器端進(jìn)行判斷，并返回相應(yīng)的結(jié)果。三種方式各有利弊，實(shí)現(xiàn)效果相同，在實(shí)際的使用過程中可以根據(jù)本身的需要進(jìn)行選擇。2016-12-12
這篇文章主要介紹了Android使用記錄訪問權(quán)限的相關(guān)資料，文中介紹的很詳細(xì)，對大家具有一定的參考借鑒價值，需要的朋友們下面來一起看看吧。2017-02-02
Android中Bitmap常見的一些操作：縮放、裁剪、旋轉(zhuǎn)和偏移
Bitmap是Android中處理圖片的一個重要的類，下面這篇文章主要給大家介紹了關(guān)于Android中Bitmap常見的一些操作：縮放、裁剪、旋轉(zhuǎn)和偏移的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Android實(shí)現(xiàn)換膚的兩種思路分析,較為詳細(xì)的分析了Android實(shí)現(xiàn)換膚的具體方法,需要的朋友可以參考下2015-12-12
詳解Android冷啟動實(shí)現(xiàn)APP秒開的方法
這篇文章給大家介紹的是Android冷啟動實(shí)現(xiàn)APP秒開的方法，對大家日常開發(fā)APP還是很實(shí)用的，有需要的可以參考借鑒。2016-08-08
Android音視頻開發(fā)之VideoView使用指南
VideoView組件內(nèi)部同樣是使用MediaPlayer+SurfaceView的形式控制MediaPlayer對視頻文件進(jìn)行播放，本文就來詳細(xì)講講它的使用方法，需要的可以參考一下2022-04-04
Android基于PhotoView實(shí)現(xiàn)的頭像/圓形裁剪控件
這篇文章主要給大家介紹了關(guān)于Android基于PhotoView實(shí)現(xiàn)的頭像/圓形裁剪控件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
Android?Flutter實(shí)現(xiàn)評分組件的示例代碼
在很多應(yīng)用中，我們都需要收集用戶的評分，比如商品滿意度、配送滿意度、應(yīng)用使用體驗(yàn)等等。本文就利用flutter_rating_bar實(shí)現(xiàn)簡易的評分組件，感興趣的可以2022-11-11
android多媒體音樂（MediaPlayer）播放器制作代碼
這篇文章主要為大家詳細(xì)介紹了android多媒體音樂（MediaPlayer）播放器的制作相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
Java程序員轉(zhuǎn)Android開發(fā)必讀經(jīng)驗(yàn)一份
小編最近幾日偷偷的發(fā)現(xiàn)部分Java程序員想轉(zhuǎn)安卓開發(fā)，故此加緊補(bǔ)充知識，為大家搜集資料，積極整理前人的經(jīng)驗(yàn)，希望可以給正處于困惑中的你，帶來些許的幫助。2017-11-11