转载清注明: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了。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。