微信底部导航图标渐变效果
2016-11-18 10:33
363 查看
主页面:
<?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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.suikajy.fragmentpageadapter.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/vp_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/ll_navigation"></android.support.v4.view.ViewPager>
<LinearLayout
android:id="@+id/ll_navigation"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<include
android:id="@+id/n1"
layout="@layout/navigation_item"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
/>
<include
android:id="@+id/n2"
layout="@layout/navigation_item"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<include
android:id="@+id/n3"
layout="@layout/navigation_item"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<include
android:id="@+id/n4"
layout="@layout/navigation_item"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
</RelativeLayout>
Fragment就是一个TextView , Java部分用的是可传参Fragment的模式(见鸿扬大神博客) .
底部导航的图标界面(include中的) , 采用两个ImageView重合的方式 , 控制透明度实现渐变 :
MainActivity :
总结 :
主要是根据ViewPager的滑动监听事件 , 获取滑动百分比 , 然后设置透明度
onPageScrolled(int position, float positionOffset, int positionOffsetPixels) (滑动过程无关向哪个方向滑动, 都是两个Page) :
参数一 指代滑动过程中左侧的Page的position
参数二 指代滑动过程中右侧的Page区域占屏幕宽度的百分比
参数三 指代滑动过程中右侧的Page区域站屏幕宽度的像素数量
include其实就是一个View标签 , 或者可以当一个可分离出去的ViewGroup也可以
<?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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.suikajy.fragmentpageadapter.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/vp_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/ll_navigation"></android.support.v4.view.ViewPager>
<LinearLayout
android:id="@+id/ll_navigation"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<include
android:id="@+id/n1"
layout="@layout/navigation_item"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
/>
<include
android:id="@+id/n2"
layout="@layout/navigation_item"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<include
android:id="@+id/n3"
layout="@layout/navigation_item"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<include
android:id="@+id/n4"
layout="@layout/navigation_item"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
</RelativeLayout>
Fragment就是一个TextView , Java部分用的是可传参Fragment的模式(见鸿扬大神博客) .
底部导航的图标界面(include中的) , 采用两个ImageView重合的方式 , 控制透明度实现渐变 :
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical"> <ImageView android:id="@+id/iv_unable" android:layout_width="20dp" android:layout_height="20dp" android:alpha="1" android:src="@drawable/shape_unable" /> //图标就是一个绿色 , 一个灰色 的shape圆形文件 <ImageView android:id="@+id/iv_enable" android:layout_width="20dp" android:layout_height="20dp" android:layout_marginTop="-20dp" android:alpha="0" android:src="@drawable/shape_enable" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="微信" android:id="@+id/tv_navigation"/> </LinearLayout>
MainActivity :
package com.suikajy.fragmentpageadapter; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.ImageView; import android.widget.TextView; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { private List<Fragment> fragments; private MyAdapter myAdapter; private ViewPager vp; private List<NaviViewHolder> selectorList = new ArrayList<>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initFragment(); initNavigation(); vp = (ViewPager) findViewById(R.id.vp_main); setViewPager(); } private void initNavigation() { int[] navs = new int[]{R.id.n1, R.id.n2, R.id.n3, R.id.n4}; for (int i = 0; i < navs.length; i++) { View view = findViewById(navs[i]); ImageView enable = (ImageView) view.findViewById(R.id.iv_enable); ImageView unable = (ImageView) view.findViewById(R.id.iv_unable); TextView textView = (TextView) view.findViewById(R.id.tv_navigation); NaviViewHolder selector = new NaviViewHolder(enable, unable, textView); selectorList.add(selector); } } private void setViewPager() { vp.setAdapter(myAdapter); vp.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() { { selectorList.get(0).getEnable().setAlpha(1f); selectorList.get(0).getUnable().setAlpha(0f); } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { if (positionOffset != 0 && positionOffsetPixels != 0) {//每次滑动结束都会调用一次onPageScrolled,并且第2,3个参数都是0,这会影响计算,故屏蔽 selectorList.get(position).getEnable().setAlpha(1f - positionOffset); selectorList.get(position).getUnable().setAlpha(positionOffset); selectorList.get(position + 1).getEnable().setAlpha(positionOffset); selectorList.get(position + 1).getUnable().setAlpha(1f - positionOffset); } } }); } private void initFragment() { fragments = new ArrayList<>(); for (int i = 0; i < 4; i++) { fragments.add(ContentFragment.getContentFragment(i + "")); } myAdapter = new MyAdapter(getSupportFragmentManager(), fragments); } static class MyAdapter extends FragmentPagerAdapter { final List<Fragment> fragments; public MyAdapter(FragmentManager fm, List<Fragment> fragments) { super(fm); this.fragments = fragments; } @Override public Fragment getItem(int position) { return fragments.get(position); } @Override public int getCount() { return fragments.size(); } } static class NaviViewHolder { private ImageView enable; private ImageView unable; private TextView textView; public NaviViewHolder(ImageView enable, ImageView unable, TextView textView) { this.enable = enable; this.unable = unable; this.textView = textView; } public ImageView getEnable() { return enable; } public ImageView getUnable() { return unable; } public TextView getTextView() { return textView; } } }
总结 :
主要是根据ViewPager的滑动监听事件 , 获取滑动百分比 , 然后设置透明度
onPageScrolled(int position, float positionOffset, int positionOffsetPixels) (滑动过程无关向哪个方向滑动, 都是两个Page) :
参数一 指代滑动过程中左侧的Page的position
参数二 指代滑动过程中右侧的Page区域占屏幕宽度的百分比
参数三 指代滑动过程中右侧的Page区域站屏幕宽度的像素数量
include其实就是一个View标签 , 或者可以当一个可分离出去的ViewGroup也可以
相关文章推荐
- android仿微信底部导航栏图标渐变效果
- 仿微信底部栏图标切换时,颜色渐变效果
- 微信底部导航渐变效果-----viewpager&PorterDuffXfermode
- TabLayout 简单实现底部图标文字导航,实现滑动底部变化效果
- 【UI视觉】100行代码实现微信底部渐变切换效果!!!
- 仿微信6.x底部指示器渐变效果
- 微信滑动底部菜单渐变效果
- Android 实现类似微信页面底部导航效果
- Android 仿微信底部渐变Tab效果
- Android仿微信页面底部导航效果代码实现
- 仿微信页面切换图标颜色渐变效果
- Android封装好的类似于RadioGroup的底部导航或顶部导航、仿微信底部导航
- viewpager setpagechangelistener解释与应用到如微信的页面转换的渐变效果
- 自定义View实现微信主页渐变效果
- Text+底部导航+中间凸起图标
- qt学习笔记(五) QGraphicsPixmapItem与QGraphicsScene的编程实例 图标拖动渐变效果
- 模仿微信界面tabhost底部导航——使用继承ActivityGroup方式
- Android仿微信底部导航
- 微信小程序顶部可滚动导航效果
- vue2.0实现底部导航切换效果