抛弃Residemenu来实现QQ5.0UI

概述    转载清注明：http://blog.csdn.net/eclipsexys    自从QQ5.0发布，新的QQUI就成了大家模仿的众矢之地，不过大家模仿的时候，一般都会使用到一个开源控件，Residemenu，相信大家对这个开源框架还是很熟悉的，刚出来的时候，确实很惊艳，但是，对于初学者或者只是想实现一个很简

        转载清注明：http://blog.csdn.net/eclipsexys

        自从QQ 5.0发布，新的QQ UI就成了大家模仿的众矢之地，不过大家模仿的时候，一般都会使用到一个开源控件，ResIDemenu，相信大家对这个开源框架还是很熟悉的，刚出来的时候，确实很惊艳，但是，对于初学者或者只是想实现一个很简单的效果的朋友来说，用这个框架就有点大材小用了，其实，利用AndroID原生的控件，我们也能实现这样一个酷眩的效果，今天的主角是SlIDingPaneLayout，这个组件是在support v4里面新增的控件，不熟悉的朋友可以看看support v4里面的sample，非常简单。

国际惯例，先上图：

大家可以看见，跟ResIDemenu实现的效果基本一致。

结构非常简单，一个容器，2个fragment，就完成了。

让我们现来看看布局：

容器类：

<androID.support.v4.Widget.SlIDingPaneLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"    androID:layout_wIDth="match_parent"    androID:ID="@+ID/main"    androID:background="@drawable/main_bg"    androID:layout_height="match_parent" >    <FrameLayout        androID:ID="@+ID/main_menu"        androID:layout_wIDth="200dp"        androID:layout_height="match_parent" >    </FrameLayout>    <FrameLayout        androID:ID="@+ID/main_container"        androID:layout_wIDth="match_parent"        androID:layout_height="match_parent" >    </FrameLayout></androID.support.v4.Widget.SlIDingPaneLayout>

就是SlIDingPaneLayout里面放了2个fragment，第一个默认是左边的，也就是初始隐藏的，第2个就是右边滑动的

让我们再来看看2个fragment：

Menu fragment：

package com.xys.fastword.fragment;import androID.app.Fragment;import androID.os.Bundle;import androID.vIEw.LayoutInflater;import androID.vIEw.VIEw;import androID.vIEw.VIEwGroup;import com.xys.fastword.R;public class MenuFragment extends Fragment {	@OverrIDe	public VIEw onCreateVIEw(LayoutInflater inflater, VIEwGroup container,			Bundle savedInstanceState) {		return inflater.inflate(R.layout.menu_frg, container, false);	}}

布局：

<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="@null" >    <linearLayout        androID:ID="@+ID/ll"        androID:layout_wIDth="match_parent"        androID:layout_height="40dp"        androID:layout_margintop="30dp"        androID:gravity="center_vertical" >        <ImageVIEw            androID:ID="@+ID/imageVIEw1"            androID:layout_wIDth="wrap_content"            androID:layout_height="wrap_content"            androID:layout_marginleft="20dp"            androID:src="@drawable/ic_launcher" />        <TextVIEw            androID:ID="@+ID/textVIEw1"            androID:layout_wIDth="wrap_content"            androID:layout_height="wrap_content"            androID:text="Large Text"            androID:textAppearance="?androID:attr/textAppearanceLarge" />    </linearLayout>    <VIEw        androID:ID="@+ID/separator1"        androID:layout_wIDth="match_parent"        androID:layout_height="1dp"        androID:layout_below="@ID/ll"        androID:layout_marginleft="20dp"        androID:layout_marginRight="20dp"        androID:layout_margintop="20dp"        androID:background="#000000" />    <linearLayout        androID:ID="@+ID/ll1"        androID:layout_wIDth="match_parent"        androID:layout_height="40dp"        androID:layout_below="@+ID/separator1"        androID:layout_margintop="30dp"        androID:gravity="center_vertical" >        <ImageVIEw            androID:ID="@+ID/imageVIEw1"            androID:layout_wIDth="wrap_content"            androID:layout_height="wrap_content"            androID:layout_marginleft="20dp"            androID:src="@drawable/ic_launcher" />        <TextVIEw            androID:ID="@+ID/textVIEw1"            androID:layout_wIDth="wrap_content"            androID:layout_height="wrap_content"            androID:text="Large Text"            androID:textAppearance="?androID:attr/textAppearanceLarge" />    </linearLayout>    <linearLayout        androID:ID="@+ID/ll2"        androID:layout_wIDth="match_parent"        androID:layout_height="40dp"        androID:layout_below="@+ID/ll1"        androID:layout_margintop="30dp"        androID:gravity="center_vertical" >        <ImageVIEw            androID:ID="@+ID/imageVIEw1"            androID:layout_wIDth="wrap_content"            androID:layout_height="wrap_content"            androID:layout_marginleft="20dp"            androID:src="@drawable/ic_launcher" />        <TextVIEw            androID:ID="@+ID/textVIEw1"            androID:layout_wIDth="wrap_content"            androID:layout_height="wrap_content"            androID:text="Large Text"            androID:textAppearance="?androID:attr/textAppearanceLarge" />    </linearLayout>    <VIEw        androID:ID="@+ID/separator2"        androID:layout_wIDth="match_parent"        androID:layout_height="1dp"        androID:layout_below="@+ID/ll2"        androID:layout_marginleft="20dp"        androID:layout_marginRight="20dp"        androID:layout_margintop="40dp"        androID:background="#000000" />    <linearLayout        androID:ID="@+ID/ll3"        androID:layout_wIDth="match_parent"        androID:layout_height="40dp"        androID:layout_alignParentleft="true"        androID:layout_below="@+ID/separator2"        androID:layout_margintop="34dp"        androID:gravity="center_vertical" >        <ImageVIEw            androID:ID="@+ID/ImageVIEw01"            androID:layout_wIDth="wrap_content"            androID:layout_height="wrap_content"            androID:layout_marginleft="20dp"            androID:src="@drawable/ic_launcher" />        <TextVIEw            androID:ID="@+ID/TextVIEw01"            androID:layout_wIDth="wrap_content"            androID:layout_height="wrap_content"            androID:text="Large Text"            androID:textAppearance="?androID:attr/textAppearanceLarge" />    </linearLayout>    <linearLayout        androID:ID="@+ID/ll4"        androID:layout_wIDth="match_parent"        androID:layout_height="40dp"        androID:layout_alignParentleft="true"        androID:layout_below="@+ID/ll3"        androID:layout_margintop="34dp"        androID:gravity="center_vertical" >        <ImageVIEw            androID:ID="@+ID/ImageVIEw01"            androID:layout_wIDth="wrap_content"            androID:layout_height="wrap_content"            androID:layout_marginleft="20dp"            androID:src="@drawable/ic_launcher" />        <TextVIEw            androID:ID="@+ID/TextVIEw01"            androID:layout_wIDth="wrap_content"            androID:layout_height="wrap_content"            androID:text="Large Text"            androID:textAppearance="?androID:attr/textAppearanceLarge" />    </linearLayout></relativeLayout>

Container Fragment：

package com.xys.fastword.fragment;import androID.animation.Animator;import androID.animation.AnimatorListenerAdapter;import androID.animation.ObjectAnimator;import androID.animation.PropertyValuesHolder;import androID.app.Fragment;import androID.os.Bundle;import androID.vIEw.LayoutInflater;import androID.vIEw.VIEw;import androID.vIEw.VIEw.OnClickListener;import androID.vIEw.VIEwGroup;import androID.vIEw.animation.BounceInterpolator;import androID.Widget.ImageVIEw;import androID.Widget.TextVIEw;import com.xys.fastword.R;public class ContainerFragment extends Fragment implements OnClickListener {	private ImageVIEw ivRecite;	private VIEw vIEw;	private TextVIEw tvTitle;	private ImageVIEw btnleft;	private ImageVIEw btnRight;	@OverrIDe	public VIEw onCreateVIEw(LayoutInflater inflater, VIEwGroup container,			Bundle savedInstanceState) {		vIEw = inflater.inflate(R.layout.container_frg, container, false);		ivRecite = (ImageVIEw) vIEw.findVIEwByID(R.ID.iv_recite);		ivRecite.setonClickListener(this);		return vIEw;	}	@OverrIDe	public voID onClick(VIEw v) {		final VIEw vIEw = v;		PropertyValuesHolder pvX = PropertyValuesHolder.offloat("scaleX", 1F,				0.8F, 1F);		PropertyValuesHolder pvY = PropertyValuesHolder.offloat("scaleY", 1F,				0.8F, 1F);		ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(v, pvX,				pvY);		animator.setInterpolator(new BounceInterpolator());		animator.start();		animator.addListener(new AnimatorListenerAdapter() {			@OverrIDe			public voID onAnimationEnd(Animator animation) {				super.onAnimationEnd(animation);				switch (vIEw.getID()) {				case R.ID.iv_recite:					break;				default:					break;				}			}		});	}}

布局：

<linearLayout 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="@androID:color/holo_blue_bright"    androID:orIEntation="vertical" >    <relativeLayout        androID:layout_wIDth="match_parent"        androID:layout_height="match_parent" >        <ImageVIEw            androID:ID="@+ID/iv_recite"            androID:layout_wIDth="120dp"            androID:layout_height="120dp"            androID:layout_marginleft="30dp"            androID:layout_margintop="30dp"            androID:background="#777777" />        <ImageVIEw            androID:ID="@+ID/imageVIEw2"            androID:layout_wIDth="120dp"            androID:layout_height="120dp"            androID:layout_below="@ID/iv_recite"            androID:layout_marginleft="30dp"            androID:layout_margintop="20dp"            androID:background="#777777"            androID:src="@drawable/ic_launcher" />        <ImageVIEw            androID:ID="@+ID/imageVIEw3"            androID:layout_wIDth="120dp"            androID:layout_height="260dp"            androID:layout_marginleft="20dp"            androID:layout_margintop="30dp"            androID:layout_toRightOf="@ID/iv_recite"            androID:background="#777777"            androID:src="@drawable/ic_launcher" />        <ImageVIEw            androID:ID="@+ID/imageVIEw4"            androID:layout_wIDth="260dp"            androID:layout_height="120dp"            androID:layout_below="@ID/imageVIEw2"            androID:layout_marginleft="30dp"            androID:layout_margintop="20dp"            androID:background="#777777"            androID:src="@drawable/ic_launcher" />    </relativeLayout></linearLayout>

为了娱乐，我给布局的一个imagevIEw加了个点击动画，不需要的可以无视。

最后，在容器中就可以来控制了：

package com.xys.fastword.activity;import androID.app.Activity;import androID.app.FragmentManager;import androID.app.FragmentTransaction;import androID.os.Bundle;import androID.support.v4.Widget.SlIDingPaneLayout;import androID.support.v4.Widget.SlIDingPaneLayout.PanelSlIDeListener;import androID.vIEw.VIEw;import androID.Widget.FrameLayout;import com.xys.fastword.R;import com.xys.fastword.fragment.ContainerFragment;import com.xys.fastword.fragment.MenuFragment;public class MainActivity extends Activity {	private SlIDingPaneLayout mSPLMain;	private FrameLayout mFLMenu;	private FrameLayout mFLContainer;	private FragmentManager mFrgManager;	private FragmentTransaction mFrgTransaction;	@OverrIDe	protected voID onCreate(Bundle savedInstanceState) {		super.onCreate(savedInstanceState);		setContentVIEw(R.layout.fw_main);		mFrgManager = getFragmentManager();		initVIEws();		bindEvents();	}	private voID bindEvents() {		mSPLMain.setPanelSlIDeListener(new PanelSlIDeListener() {			@OverrIDe			public voID onPanelSlIDe(VIEw arg0, float v) {				mFLMenu.setScaleY(v / 2 + 0.5F);				mFLMenu.setScaleX(v / 2 + 0.5F);				mFLMenu.setAlpha(v);				mFLContainer.setScaleY(1 - v / 5);			}			@OverrIDe			public voID onPanelOpened(VIEw arg0) {			}			@OverrIDe			public voID onPanelClosed(VIEw arg0) {			}		});	}	private voID initVIEws() {		mSPLMain = (SlIDingPaneLayout) findVIEwByID(R.ID.main);		mFLMenu = (FrameLayout) findVIEwByID(R.ID.main_menu);		mFLContainer = (FrameLayout) findVIEwByID(R.ID.main_container);		mFrgTransaction = mFrgManager.beginTransaction();		mFrgTransaction.add(R.ID.main_menu, new MenuFragment(), "mMenuFrg");		mFrgTransaction.add(R.ID.main_container, new ContainerFragment(),				"mContainerFrg");		mFrgTransaction.commit();	}}

实现效果的关键就在于setPanelSlIDeListener中的onPanelSlIDe(VIEw arg0, float v)的参数v：

参数v就是滑动时的距离参数，0－1的变化，那么，我们就可以根据这个值来通过各种函数的变化，来获取我们所需要的值，这样就实现了一个插值器了，实现动画也就so easy了。

总结

以上是内存溢出为你收集整理的抛弃Residemenu来实现QQ5.0UI全部内容，希望文章能够帮你解决抛弃Residemenu来实现QQ5.0UI所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。