[置顶] Android ViewPage+Fragment伸缩实现菜单效果，仿Ifanr

先上Ifanr效果



实现效果



1.布局xml

设置android:clipChildren=”false” 使子View在ViewPage被缩放时允许超出ViewPage的范围

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/content"
tools:context=".View.Activity.MainActivity">

<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="false" />

<android.support.v4.widget.SwipeRefreshLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/tabs">

<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:id="@+id/frag_content"
android:clipChildren="false"
android:foreground="@android:color/transparent">

<include layout="@layout/menuview_background" ></include>

<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/vp_content"
android:clipChildren="false">

<com.gy.ifanr.View.Widget.MyViewPage
android:id="@+id/view_pager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/black"
android:clipChildren="false"
android:layout_alignParentBottom="true"/>

</FrameLayout>

<ImageButton
android:id="@+id/btn_scale"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_margin="10dp"
android:background="@drawable/menu"
android:layout_gravity="right|top"
android:clickable="true"
android:focusable="true"/>

<ImageButton
android:id="@+id/btn_menu"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_margin="10dp"
android:background="@drawable/circle"
android:layout_gravity="left|top"
android:clickable="true"
android:focusable="true"/>

</FrameLayout>

</android.support.v4.widget.SwipeRefreshLayout>

</RelativeLayout>

fragment_first_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="你好"
android:id="@+id/hello"
android:textColor="@android:color/black"/>

<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/mask"
android:background="@android:color/transparent"/>

</FrameLayout>

背景菜单布局

menuview_background.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView"
android:src="@mipmap/ic_launcher"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="菜单1"
android:id="@+id/textView" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="菜单2"
android:id="@+id/textView2" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="菜单3"
android:id="@+id/textView3" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="菜单4"
android:id="@+id/textView4" />

</LinearLayout>

2.MainActivity

public class MainActivity extends AppCompatActivity implements Animator.AnimatorListener,View.OnClickListener, OnFragmentClick {

private List<Fragment> fragments;

private MyViewPage viewPager;
private RelativeLayout content;
private TabLayout mTabLayout;
private FrameLayout viewpagecontent;
private FrameLayout vpParent;
private float scale = 0.6f;
private float x,y;
private ImageButton menubt,scalebt;

private boolean scalling = false;
private boolean isScalled = false;

private MenuHelper moremenu;
private View moremenuView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findview();
addFrags();
setView();
}

private void findview(){
viewPager = (MyViewPage) findViewById(R.id.view_pager);
content = (RelativeLayout) findViewById(R.id.content);
viewpagecontent = (FrameLayout) findViewById(R.id.frag_content);
mTabLayout = (TabLayout) findViewById(R.id.tabs);
vpParent = (FrameLayout) findViewById(R.id.vp_content);
menubt = (ImageButton) findViewById(R.id.btn_menu);
scalebt = (ImageButton) findViewById(R.id.btn_scale);
moremenuView = View.inflate(this,R.layout.grid_menu_layout,null);
}

private void setView(){
viewPager.setOffscreenPageLimit(3);
viewPager.setPageMargin(6);
menubt.setOnClickListener(this);
scalebt.setOnClickListener(this);
moremenu = new MenuHelper(this,menubt,moremenuView,viewpagecontent);
//将ViewPage父容器的touch事件转发给ViewPage，不然只有中间的item可以触摸，并且需要自定义
//ViewPage
vpParent.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
return viewPager.dispatchTouchEvent(event);
}
});
}

private void addFrags(){
List<String> titles = new ArrayList<>();
titles.add("页面1");
titles.add("页面2");
titles.add("页面3");
mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(0)));
mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(1)));
mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(2)));
fragments = new ArrayList<>();
fragments.add(new FirstFragment());
fragments.add(new SecFragment());
fragments.add(new ThrFragment());
FragmentAdapter adapter =
new FragmentAdapter(getSupportFragmentManager(), fragments, titles);
viewPager.setAdapter(adapter);
mTabLayout.setupWithViewPager(viewPager);
mTabLayout.setTabsFromPagerAdapter(adapter);
}

//对ViewPage的父视图进行Y轴缩放，同时对ViewPage进行X轴缩放，保持x/y比例
private void scaleViewPage(){
x = vpParent.getWidth()/2 + vpParent.getX();
y = vpParent.getHeight() + vpParent.getY();
ViewPropertyAnimator.animate(vpParent).setListener(this).scaleY(scale);
ViewPropertyAnimator.animate(viewPager).scaleX(scale);
ViewHelper.setPivotX(viewPager, x);
ViewHelper.setPivotY(viewPager, y);
ViewHelper.setPivotX(vpParent, x);
ViewHelper.setPivotY(vpParent, y);
ViewHelper.setScaleX(viewPager,scale);
ViewHelper.setScaleY(vpParent,scale);
}

//缩放还原
private void restoreViewPage(){
x = vpParent.getWidth()/2 + vpParent.getX();
y = vpParent.getHeight() + vpParent.getY();
ViewPropertyAnimator.animate(vpParent).setListener(this).scaleY(1);
ViewPropertyAnimator.animate(viewPager).scaleX(1);
ViewHelper.setPivotX(viewPager, x);
ViewHelper.setPivotY(viewPager, y);
ViewHelper.setPivotX(vpParent, x);
ViewHelper.setPivotY(vpParent, y);
ViewHelper.setScaleX(viewPager,1);
ViewHelper.setScaleY(vpParent,1);
}

//相关视图元素进行控制
@Override
public void onAnimationStart(Animator animator) {
scalling = true;
if (!isScalled){
mTabLayout.setVisibility(View.INVISIBLE);
menubt.setVisibility(View.GONE);
}
}

@Override
public void onAnimationEnd(Animator animator) {
scalling = false;
isScalled = !isScalled;
if (!isScalled){
mTabLayout.setVisibility(View.VISIBLE);
menubt.setVisibility(View.VISIBLE);
}
}

@Override
public void onAnimationCancel(Animator animator) {

}

@Override
public void onAnimationRepeat(Animator animator) {

}

@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.btn_scale:
doScale();
break;
case R.id.btn_menu:
moremenu.showMenu();
break;
}
}

private void doScale() {
if (scalling)
return;
if (isScalled){
restoreViewPage();
}else {
scaleViewPage();
}
}

@Override
public void OnFragClick(int no) {
if (isScalled){
viewPager.setCurrentItem(no);
doScale();
}
}
}

3.BaseFragment

/**
* 基类Fragment，捕获Click事件以收起菜单
* Created by gy939 on 2016/9/21.
*/
public abstract class BaseFragment extends Fragment{

private View view;

private OnFragmentClick fragmentClick;

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
view = inflater.inflate(R.layout.fragment_first_layout,container,false);
//这里其实建议使用类似EventBus的消息框架做组件间通讯。
fragmentClick = (OnFragmentClick) getActivity();
view.findViewById(R.id.mask).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.e("gy","点击了"+hashCode());
fragmentClick.OnFragClick(getNo());
}
});
((TextView)view.findViewById(R.id.hello)).setText(getClass().getName());
return view;
}

//获取Fragment编号
protected abstract int getNo();

}

4.自定义ViewPage

需要对触摸事件进行转发拦截等

public class MyViewPage extends ViewPager{

public MyViewPage(Context context) {
super(context);
}

public MyViewPage(Context context, AttributeSet attrs) {
super(context, attrs);
}

/**
* 拦截ViewPage范围以外的Touch事件
*/
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
FragmentAdapter adapter = (FragmentAdapter) getAdapter();
int[] xy = new int[2];
getLocationInWindow(xy);
int x = xy[0];
int y = xy[1];
Log.e("gy","x="+x+"y="+y);
if (ev.getRawY() < y){
Log.e("gy",y+"-"+ev.getRawY());
return true;
}
if (getWidth() - x < ev.getRawX()){
//在右边
Log.e("gy","右边");
return true;
}else if (x > ev.getRawX()){
//在左边
Log.e("gy","左边");
return true;
}else {
//中间在区域内不做拦截
}
return super.onInterceptTouchEvent(ev);
}

/**
* 向ViewPage范围以外的子View分发Touch事件，
* 因为设置了ClipChildren属性以后，子View已经可以超出父View的范围了
*/
@Override
public boolean onTouchEvent(MotionEvent ev) {
FragmentAdapter adapter = (FragmentAdapter) getAdapter();
int fragno = adapter.getCurPosition();
int[] xy = new int[2];
getLocationInWindow(xy);
int x = xy[0];
int y = xy[1];
if (getWidth() - x < ev.getRawX()){
//在右边
Log.e("gy","右边");
//在右边将事件分发给当前Page的右边一个Page
if (fragno < adapter.getCount() - 1)
adapter.getItem(fragno + 1).getView().dispatchTouchEvent(ev);
}else if (x > ev.getRawX()){
//在左边
Log.e("gy","左边");
//在左边边将事件分发给当前Page的左边一个Page
if (fragno > 0)
adapter.getItem(fragno - 1).getView().dispatchTouchEvent(ev);
}else {
//中间
}
return super.onTouchEvent(ev);
}

}

最后老规矩上链接GitHub