Android HorizontalScrollView 仿QQ侧滑

来源：互联网发布：mac搭建ipv6测试环境编辑：程序博客网时间：2024/06/08 08:20

package com.tz.qqslidingmenu;import android.app.Activity;import android.os.Bundle;import com.tz.qqslindingmenu.R;public class Qq_slidingmenuActivity extends Activity {/** Called when the activity is first created. */@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);}}

main.xml

<com.tz.qqslidingmenu.view.SlidingMenu xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/id_menu"    android:layout_width="wrap_content"    android:layout_height="fill_parent"    android:background="@drawable/menu_bg"    android:fadingEdge="none"    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>    </LinearLayout></com.tz.qqslidingmenu.view.SlidingMenu>

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"    android:background="#0000" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_centerVertical="true"        android:orientation="vertical" >        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="wrap_content" >            <ImageView                android:id="@+id/one"                android:layout_width="50dp"                android:layout_height="50dp"                android:layout_centerVertical="true"                android:layout_marginLeft="20dp"                android:layout_marginTop="20dp"                android:src="@drawable/img_1" />            <TextView                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:layout_centerVertical="true"                android:layout_marginLeft="20dp"                android:layout_toRightOf="@id/one"                android:text="开通会员"                android:textColor="#f0f0f0"                android:textSize="20sp" />        </RelativeLayout>        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="wrap_content" >            <ImageView                android:id="@+id/two"                android:layout_width="50dp"                android:layout_height="50dp"                android:layout_centerVertical="true"                android:layout_marginLeft="20dp"                android:layout_marginTop="20dp"                android:src="@drawable/img_2" />            <TextView                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:layout_centerVertical="true"                android:layout_marginLeft="20dp"                android:layout_toRightOf="@id/two"                android:text="QQ钱包"                android:textColor="#f0f0f0"                android:textSize="20sp" />        </RelativeLayout>        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="wrap_content" >            <ImageView                android:id="@+id/three"                android:layout_width="50dp"                android:layout_height="50dp"                android:layout_centerVertical="true"                android:layout_marginLeft="20dp"                android:layout_marginTop="20dp"                android:src="@drawable/img_3" />            <TextView                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:layout_centerVertical="true"                android:layout_marginLeft="20dp"                android:layout_toRightOf="@id/three"                android:text="网上营业厅"                android:textColor="#f0f0f0"                android:textSize="20sp" />        </RelativeLayout>        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="wrap_content" >            <ImageView                android:id="@+id/four"                android:layout_width="50dp"                android:layout_height="50dp"                android:layout_centerVertical="true"                android:layout_marginLeft="20dp"                android:layout_marginTop="20dp"                android:src="@drawable/img_4" />            <TextView                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:layout_centerVertical="true"                android:layout_marginLeft="20dp"                android:layout_toRightOf="@id/four"                android:text="个性装扮"                android:textColor="#f0f0f0"                android:textSize="20sp" />        </RelativeLayout>        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="wrap_content" >            <ImageView                android:id="@+id/five"                android:layout_width="50dp"                android:layout_height="50dp"                android:layout_centerVertical="true"                android:layout_marginLeft="20dp"                android:layout_marginTop="20dp"                android:src="@drawable/img_5" />            <TextView                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:layout_centerVertical="true"                android:layout_marginLeft="20dp"                android:layout_toRightOf="@id/five"                android:text="我的收藏"                android:textColor="#f0f0f0"                android:textSize="20sp" />        </RelativeLayout>    </LinearLayout></RelativeLayout>

SlidingMenu

package com.tz.qqslidingmenu.view;//需要导入 nineoldandroids jar包import com.nineoldandroids.view.ViewHelper;import android.content.Context;import android.os.Handler;import android.os.Message;import android.util.AttributeSet;import android.util.DisplayMetrics;import android.view.MotionEvent;import android.view.ViewGroup;import android.view.WindowManager;import android.widget.HorizontalScrollView;import android.widget.LinearLayout;public class SlidingMenu extends HorizontalScrollView{private int widthPixels;private ViewGroup mMenu;private ViewGroup mMain;private int mMenuRightOffset = 100;private int mMenuWidth;private Handler handler = new Handler(){public void handleMessage(android.os.Message msg) {int scrollDis = (Integer) msg.obj;SlidingMenu.this.smoothScrollTo(scrollDis, 0);};};public SlidingMenu(Context context, AttributeSet attrs) {super(context, attrs);WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);DisplayMetrics displayMetrics = new DisplayMetrics();wm.getDefaultDisplay().getMetrics(displayMetrics);widthPixels = displayMetrics.widthPixels;mMenuRightOffset = widthPixels/4;}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {//子控件的宽高可以在这里先设置LinearLayout wrapper = (LinearLayout) this.getChildAt(0);//获取menumMenu = (ViewGroup) wrapper.getChildAt(0);//获取mainmMain = (ViewGroup) wrapper.getChildAt(1);mMenuWidth = widthPixels - mMenuRightOffset;//设置menu宽度mMenu.getLayoutParams().width = mMenuWidth;//设置主界面宽度mMain.getLayoutParams().width = widthPixels;super.onMeasure(widthMeasureSpec, heightMeasureSpec);}@Overrideprotected 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);}}@Overridepublic boolean onTouchEvent(MotionEvent ev) {// TODO Auto-generated method stubint action = ev.getAction();switch (action) {case MotionEvent.ACTION_UP: //判断已经滑出去的距离，根据这个距离决定显示菜单或者主界面Message msg = handler.obtainMessage();int scrollX = this.getScrollX();int span = mMenuWidth - widthPixels/2;if(scrollX<span){//滑到x为0msg.obj = 0;}else{//滑到主界面msg.obj = mMenuWidth;}handler.sendMessage(msg);break;default:break;}return super.onTouchEvent(ev);}@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt) {//滑动条滑动的监听事件//做动画float scale = (float)l/mMenuWidth;//从0增到1float leftScale =(float) (1.0f - 0.3*scale); //缩放从1缩小到0.7ViewHelper.setScaleX(mMenu, leftScale);//将menu从1倍缩小到0.7ViewHelper.setScaleY(mMenu, leftScale);ViewHelper.setAlpha(mMenu, (float)(1.0f-0.8*scale));//将menu透明度从1增加0.2ViewHelper.setTranslationX(mMenu, l*0.7f);//保持不被左边移出去//主界面的缩放float rightScale = 0.8f +scale*0.2f;ViewHelper.setScaleX(mMain, rightScale);//从0.8倍放大到1.0倍（从右滑到左）ViewHelper.setScaleY(mMain, rightScale);super.onScrollChanged(l, t, oldl, oldt);}}

0 0