Android 5.0多種類の横滑りバーの効果例コード

13445 ワード

and roid 5.0 横滑りメニュー

1.通常横滑り
効果図:
这里写图片描述

構想：カスタムViewでHorizontalScrrollViewを継承し、OnMeasre（）、onLayout（）、ontouchEvent（）を書き換える。
メソッドを設定し、menu（動画でmenuを開始すると隠し状態になる）レイアウトとcontentレイアウトを設定します。注意：ViewHelper類を使用するにはnineoldandroids-24.0.jarバッグを導入する必要があります。
menumenu)レイアウトコード:


<?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 u)メーン）レイアウトコード：


<?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>

カスタムatr.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;//    
private int mScreenWidth;//    
private int mMenuRightPadding=50;
private boolean once;
private int mMenuWidth;
private boolean isOpen;
public SlidingMenu(Context context) {
this(context, null);
}
/**
*          ，  
* @param context
* @param attrs
*/
public SlidingMenu(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
/**
*           ，       
* @param context
* @param attrs
* @param defStyleAttr
*/
public SlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//          
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;
}
/**
*    view    
*         
* @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;
//  content   
mContent.getLayoutParams().width=mScreenWidth;
mWapper.getLayoutParams().width=mScreenWidth;
once=true;
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
/**
*        ， 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     ，   
textView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mleftMenu.toggle();
}
});
}
public void toogleMenu(View view){
mleftMenu.toggle();
}
}

2.引き出し式横滑り（一）
効果図:
这里写图片描述

考え方：元の基礎の上で、カスタムViewファイルの中でOScrrollChengdを書き換える（）方法
コードを追加:


/**
*      
* @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);
//      ，  TranslateX,l  menu     ,menu           ，     scale 1~0,menu       ；
float scale=l*1.0f/mMenuWidth; //1~0
ViewHelper.setTranslationX(mMenu, mMenuWidth * scale);
}

3.引き出し式横滑り（二）
効果図:
这里写图片描述

考え方：一の基礎の上でmenuのスケーリング効果を設定することによって、contentのスケーリング効果とズーム中心が実現されます。
実現コード:


/**
*     
* @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);
//      ，  TranslateX,l  menu     ,menu           ，    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);
}

以上は小编が绍介したAndroid 5.0种类の横スライドバーの効果の実例コードです。皆さんに助けてほしいです。もし何か疑问がありましたら、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。

AndroidのTabHostとView Pagerを組み合わせたトップページのナビゲーション効果を実現します。

Android ListViewを最後までスクロールしたら自動的にデータをロードします。