Android开发——HorizontalScrollView实现侧滑效果

来源：互联网发布：linux maven 打包war 编辑：程序博客网时间：2024/06/04 23:26

我们这个就不多说闲话了，贴完代码睡觉。

MyHoricontaiScrollView.java

package com.example.horizontalscrollview;import android.content.Context;import android.util.AttributeSet;import android.util.DisplayMetrics;import android.util.Log;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 linearLayout;private ViewGroup myMenu;private ViewGroup myContent;private int screenWidth;// 屏幕宽度private int myMenuWidth;// 菜单宽度private int myMenuPaddingRight = 50;// 避免多次调用onMeasure的标志private boolean once = false;public MyHorizontalScrollView(Context context, AttributeSet attrs) {super(context, attrs);// TODO Auto-generated constructor stub// 获取屏幕宽度WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);// Andorid.util 包下的DisplayMetrics 类提供了一种关于显示的通用信息，如显示大小，分辨率和字体。DisplayMetrics outMetrics = new DisplayMetrics();windowManager.getDefaultDisplay().getMetrics(outMetrics);// 屏幕宽度screenWidth = outMetrics.widthPixels;// dp转化为pxmyMenuPaddingRight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics());}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {// TODO Auto-generated method stubsuper.onMeasure(widthMeasureSpec, heightMeasureSpec);// 调用一次if (!once) {// 第一个子元素linearLayout = (LinearLayout) this.getChildAt(0);// HorizontalScrollView下LinearLayout的第一个子元素myMenu = (ViewGroup) linearLayout.getChildAt(0);// HorizontalScrollView下LinearLayout的第二个子元素myContent = (ViewGroup) linearLayout.getChildAt(1);// 设置子View的宽高，高于屏幕一致// 菜单的宽度=屏幕宽度-右边距myMenuWidth = myMenu.getLayoutParams().width = screenWidth- myMenuPaddingRight;// 内容宽度=屏幕宽度myContent.getLayoutParams().width = screenWidth;// 决定自身View的宽高，高于屏幕一致// 由于这里的LinearLayout里只包含了Menu和Content所以就不需要额外的去指定自身的宽once = true;}}// 设置View的位置，首先，先将Menu隐藏（在eclipse中ScrollView的画面内容（非滚动条）正数表示向左移，向上移）@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {super.onLayout(changed, l, t, r, b);// 刚载入界面的时候隐藏Menu菜单也就是ScrollView向左滑动菜单自身的大小if (changed) {this.scrollTo(myMenuWidth, 0);// 向左滑动，相当于把右边的内容页拖到正中央，菜单隐藏}}@Overridepublic boolean onTouchEvent(MotionEvent ev) {// TODO Auto-generated method stubint action = ev.getAction();switch (action) {case MotionEvent.ACTION_UP:int scrollX = this.getScrollX();// 滑动的距离scrollTo方法里，也就是onMeasure方法里的向左滑动那部分if (scrollX >= myMenuWidth / 2) {this.smoothScrollTo(myMenuWidth, 0);// 向左滑动展示内容} else {this.smoothScrollTo(0, 0);}return true;}return super.onTouchEvent(ev);}@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt) {// TODO Auto-generated method stubsuper.onScrollChanged(l, t, oldl, oldt);Log.i("tuzi", l + "");float scale = l * 1.0f / myMenuWidth; // 1 ~ 0/** * 区别1：内容区域1.0~0.7 缩放的效果 scale : 1.0~0.0 0.7 + 0.3 * scale *  * 区别2：菜单的偏移量需要修改 *  * 区别3：菜单的显示时有缩放以及透明度变化 缩放：0.7 ~1.0 1.0 - scale * 0.3 透明度 0.6 ~ 1.0 0.6+ * 0.4 * (1- scale) ; *  */float rightScale = 0.7f + 0.3f * scale;float leftScale = 1.0f - scale * 0.3f;float leftAlpha = 0.6f + 0.4f * (1 - scale);myMenu.setTranslationX(myMenuWidth * scale * 0.8f);myMenu.setScaleX(leftScale);myMenu.setScaleY(leftScale);myMenu.setAlpha(leftAlpha);// 设置content的缩放的中心点myContent.setPivotX(0);myContent.setPivotY(myContent.getHeight() / 2);myContent.setScaleX(rightScale);myContent.setScaleY(rightScale);}}

left_menu.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" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical" >        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_centerInParent="true" >            <ImageView                android:id="@+id/menuimage1"                android:layout_width="50dp"                android:layout_height="50dp"                android:layout_centerVertical="true"                android:layout_marginLeft="20dp"                android:layout_marginTop="20dp"                android:src="@drawable/a1" />            <TextView                android:id="@+id/menutext1"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_centerVertical="true"                android:layout_marginLeft="20dp"                android:layout_marginTop="20dp"                android:layout_toRightOf="@id/menuimage1"                android:text="菜单一"                android:textColor="@android:color/white"                android:textSize="20dp" />        </RelativeLayout>        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_centerInParent="true" >            <ImageView                android:id="@+id/menuimage2"                android:layout_width="50dp"                android:layout_height="50dp"                android:layout_centerVertical="true"                android:layout_marginLeft="20dp"                android:layout_marginTop="20dp"                android:src="@drawable/a2" />            <TextView                android:id="@+id/menutext2"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_centerVertical="true"                android:layout_marginLeft="20dp"                android:layout_marginTop="20dp"                android:layout_toRightOf="@id/menuimage2"                android:text="菜单二"                android:textColor="@android:color/white"                android:textSize="20dp" />        </RelativeLayout>        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_centerInParent="true" >            <ImageView                android:id="@+id/menuimage3"                android:layout_width="50dp"                android:layout_height="50dp"                android:layout_centerVertical="true"                android:layout_marginLeft="20dp"                android:layout_marginTop="20dp"                android:src="@drawable/a3" />            <TextView                android:id="@+id/menutext3"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_centerVertical="true"                android:layout_marginLeft="20dp"                android:layout_marginTop="20dp"                android:layout_toRightOf="@id/menuimage3"                android:text="菜单三"                android:textColor="@android:color/white"                android:textSize="20dp" />        </RelativeLayout>        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_centerInParent="true" >            <ImageView                android:id="@+id/menuimage4"                android:layout_width="50dp"                android:layout_height="50dp"                android:layout_centerVertical="true"                android:layout_marginLeft="20dp"                android:layout_marginTop="20dp"                android:src="@drawable/a4" />            <TextView                android:id="@+id/menutext4"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_centerVertical="true"                android:layout_marginLeft="20dp"                android:layout_marginTop="20dp"                android:layout_toRightOf="@id/menuimage4"                android:text="菜单四"                android:textColor="@android:color/white"                android:textSize="20dp" />        </RelativeLayout>        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_centerInParent="true" >            <ImageView                android:id="@+id/menuimage5"                android:layout_width="50dp"                android:layout_height="50dp"                android:layout_centerVertical="true"                android:layout_marginLeft="20dp"                android:layout_marginTop="20dp"                android:src="@drawable/a5" />            <TextView                android:id="@+id/menutext5"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_centerVertical="true"                android:layout_marginLeft="20dp"                android:layout_marginTop="20dp"                android:layout_toRightOf="@id/menuimage5"                android:text="菜单五"                android:textColor="@android:color/white"                android:textSize="20dp" />        </RelativeLayout>    </LinearLayout></RelativeLayout>

activity_main.xml

<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"    android:background="@drawable/background" >    <com.example.horizontalscrollview.MyHorizontalScrollView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:scrollbars="none" >        <LinearLayout            android:layout_width="match_parent"            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/content" >            </LinearLayout>        </LinearLayout>    </com.example.horizontalscrollview.MyHorizontalScrollView></RelativeLayout>

好了，晚安!

0 0