GooglePlay 首页效果----tab的揭示效果(Reveal Effect) (1)
前言:
无意打开GooglePlay app来着,然后发现首页用了揭示效果,连起来用着感觉还不错.
不清楚什么是揭示效果(Reveal Effect)的效果可以看我前面一篇文章:Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果
无法使用Google的小伙伴可以看我更前面的文章:提高(Android)开发效率的工具与网站
工具与分析
- GooglePlay App,这个自己安装好吧,
- 工具 uiautomatorviewer.bat,ui分析的工具,在Android sdk的tools目录,建议鼠标右键给它在桌面建个快捷方式,下次桌面双击就可以使用了,非常方便.
要点:
- 揭示动画 ViewAnimationUtils.createCircularReveal()
- TabLayout 的使用(修改)
- 获取view点击的坐标(用于做动画)
效果展示(动画的颜色是随机的)
demo地址: https://github.com/didikee/Demos
墙内的小伙伴可以试试 APKPure,一个墙内可以使用,资源是GooglePlay的,缺点:下载慢,优点:能下....(无言以对...)
界面布局:
<LinearLayout
android:id="@+id/activity_google_play_tab_reveal"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.didikee.demos.ui.act.viewActivity.GooglePlayTabRevealActivity"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="140dp">
<FrameLayout
android:id="@+id/below"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="@+id/act_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
<com.didikee.demos.ui.tab.ExtTabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom"
app:tabGravity="fill"
app:tabIndicatorHeight="1dp"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/colorAccent"
app:tabTextColor="@color/white"/>
</FrameLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/bisque"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
</LinearLayout>
重点是FrameLayout和它内部的子View.
<FrameLayout
android:id="@+id/below"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="@+id/act_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
子view负责执行动画,FrameLayout负责在子view执行完动画后变成子view执行动画的颜色,这样就能达到一直无限切换的假象
这个模式和GooglePlay保持了一致,你可以打开uiautomatorviewer看看Google的布局.
java实现
这里有个要说明的细节,可能细心的同学会发现,执行动画的起始位置和你手指点击的位置有关,这里的实现的以手指抬起的坐标为执行动画的起点.
GooglePlay的tab不知道是什么写的,我个人感觉不是TabLayout,因为tabLayout默认点击是会有涟漪效果的,但是GooglePlay的tab点击了却没有,我也不想纠结它是用什么做的,我比较偏好TabLayout,所以我就用TabLayout去实现.
插一句,关于Android自定义View的三种方式o((≧▽≦o)
1. 继承 ViewGroup
2. 继承 View
3. 拷贝源码,然后改改...(～ o ～)~zZ
今天,用第三种................
获取TabLayout点击tab时的坐标:
拷贝Tablayout源码到自己的工程(不要学我....)
TabLayout的组成:
TabLayout
TabView //每个item元素view
SlidingTabStrip //每个item下有一条线,也是一个view
我的目标是 TabView,在tabView Selected 的时候将(即调用 mTab.select();)坐标也一起传出去.于是我添加一个接口.
//--------------add listener
public interface LocationListener{
void location(float x,float y,int tabHeight);
}
private MyExtTabLayout.LocationListener locationListener;
public void setLocationListener(MyExtTabLayout.LocationListener locationListener) {
this.locationListener = locationListener;
}
//------------add listener end
在tab选中时传出坐标:
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction()==MotionEvent.ACTION_UP){
x=event.getRawX();
y=event.getRawY();
}
return super.onTouchEvent(event);
}
@Override
public boolean performClick() {
final boolean value = super.performClick();
if (mTab != null) {
if (locationListener!=null)locationListener.location(x,y,getHeight());
mTab.select();
return true;
} else {
return value;
}
}
执行动画
有了坐标就可以执行动画了,动画比较简单.和之前的一篇没多大区别,只是这次我改了执行动画的起始坐标,变成了动态的了.
完整代码:
private ViewPager viewPager;
private SimpleFragmentPagerAdapter pagerAdapter1;
private ExtTabLayout tabLayout;
private View viewAnimate;
private View below;
private float x;
private float y;
private int height;
private int belowColor;
private int systemStatusBarHeight;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_google_play_tab_reveal);
setBarStyle();
below = findViewById(R.id.below);
viewAnimate = findViewById(R.id.act_view);
systemStatusBarHeight = DisplayUtil.getSystemStatusBarHeight(this);
pagerAdapter1 = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), new
String[]{"tab1", "tab2", "tab3", "tab4"});
viewPager = (ViewPager) findViewById(R.id.viewpager);
tabLayout = (ExtTabLayout) findViewById(R.id.sliding_tabs);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(ExtTabLayout.MODE_FIXED);
viewPager.setAdapter(pagerAdapter1);
belowColor = Color.parseColor(ColorUtil.random());
below.setBackgroundColor(belowColor);
viewAnimate.setBackgroundColor(belowColor);
tabLayout.setLocationListener(new ExtTabLayout.LocationListener() {
@Override
public void location(float x, float y, int tabHeight) {
GooglePlayTabRevealActivity.this.x = x;
GooglePlayTabRevealActivity.this.y = y;
GooglePlayTabRevealActivity.this.height = tabHeight;
}
});
tabLayout.addOnTabSelectedListener(new ExtTabLayout.OnTabSelectedListener() {
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
public void onTabSelected(ExtTabLayout.Tab tab) {
Log.e("test", "x: " + x + " y: " + y + " height: " + height);
final int width = viewAnimate.getWidth();
final int height = viewAnimate.getHeight();
final double radio = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
float centerX = x;
float centerY = y;
Animator circularReveal = ViewAnimationUtils.createCircularReveal(viewAnimate,
(int) centerX,
(int) centerY, 0, (float) radio);
circularReveal.setInterpolator(new AccelerateInterpolator());
circularReveal.setDuration(375);
circularReveal.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
belowColor = Color.parseColor(ColorUtil.random());
viewAnimate.setBackgroundColor(belowColor);
}
@Override
public void onAnimationEnd(Animator animation) {
below.setBackgroundColor(belowColor);
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
circularReveal.start();
}
@Override
public void onTabUnselected(ExtTabLayout.Tab tab) {
}
@Override
public void onTabReselected(ExtTabLayout.Tab tab) {
}
});
}
public void setBarStyle() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
// 设置状态栏透明
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
}
public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {
private String tabTitles[];
public SimpleFragmentPagerAdapter(FragmentManager fm, String[] strings) {
super(fm);
tabTitles = strings;
}
@Override
public Fragment getItem(int position) {
return PageFragment.newInstance(position + 1);
}
@Override
public int getCount() {
return tabTitles.length;
}
@Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
}
}
@Override
protected void onDestroy() {
super.onDestroy();
viewAnimate.clearAnimation();
}
最后,demo在我的github上,地址是: https://github.com/didikee/Demos
喜欢的点个赞啦