Abandon Residemenu to implement QQ5.0UI and residemenuqq5.0ui

Abandon Residemenu to implement QQ5.0UI and residemenuqq5.0ui

Reprinted clear note: http://blog.csdn.net/eclipsexys

Since the release of QQ 5.0, the new qq ui has become a target for everyone to imitate. However, when everyone imitates it, they generally use an open-source control, Residemenu, I believe everyone is still familiar with this open-source framework. It was amazing when we first came out. However, for beginners or friends who just want to achieve a very simple effect, using this framework is a little tricky. In fact, using Android native controls, we can also achieve this cool effect. Today's main character is SlidingPaneLayout, this component is a new control added in support v4. If you are not familiar with it, you can check the sample in support v4, which is very simple.

International practice, first:

As you can see, this is basically the same as Residemenu.

The structure is very simple. A container and two fragment are complete.

Let's take a look at the layout:

Container class:

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

There are two fragment entries in SlidingPaneLayout. The first one is left by default, that is, the first one is hidden, and the first one is slide on the right.

Let's take a look at two more 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 {@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {return inflater.inflate(R.layout.menu_frg, container, false);}}

Layout:

<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;@Overridepublic 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;}@Overridepublic 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() {@Overridepublic void onAnimationEnd(Animator animation) {super.onAnimationEnd(animation);switch (view.getId()) {case R.id.iv_recite:break;default:break;}}});}}

Layout:

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

For entertainment, I added a click animation to an imageview layout, which can be ignored if not needed.

Finally, you can control it in the container:

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;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.fw_main);mFrgManager = getFragmentManager();initViews();bindEvents();}private void bindEvents() {mSPLMain.setPanelSlideListener(new PanelSlideListener() {@Overridepublic 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);}@Overridepublic void onPanelOpened(View arg0) {}@Overridepublic 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();}}

The key to the implementation is the parameter v of onPanelSlide (View arg0, float v) in setPanelSlideListener:

The parameter v is the distance parameter during the sliding process. If the value is 0-1, we can obtain the value we need through the changes of various functions based on the value, in this way, an interpolation tool is implemented, and the animation is so easy.