滑动导航栏,标签页切换
来源:互联网 发布:更改淘宝密码 编辑:程序博客网 时间:2024/03/29 08:14
弄了个gif录制工具,看下我的动图有没有成功,效果如下
我先是找到了一个仿网易新闻客户端的例子,
MainActivity
package com.example.smooth;import java.util.ArrayList;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.app.FragmentTransaction;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.DisplayMetrics;import android.view.Menu;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.view.animation.Animation;import android.view.animation.Animation.AnimationListener;import android.view.animation.TranslateAnimation;import android.widget.HorizontalScrollView;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.RelativeLayout;import android.widget.RelativeLayout.LayoutParams;import android.widget.TextView;public class MainActivity extends FragmentActivity implements OnClickListener {private HorizontalScrollView mHorizontalScrollView ;private LinearLayout mLinearLayout;private ViewPager pager;private ImageView mImageView;private int mScreenWidth;private int item_width;private int endPosition;private int beginPosition;private int currentFragmentIndex;private boolean isEnd;private ArrayList<Fragment> fragments;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);DisplayMetrics dm = new DisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(dm);mScreenWidth = dm.widthPixels;mHorizontalScrollView = (HorizontalScrollView) findViewById(R.id.hsv_view);mLinearLayout = (LinearLayout) findViewById(R.id.hsv_content);mImageView = (ImageView) findViewById(R.id.img1);item_width = (int) ((mScreenWidth / 4.0 + 0.5f));mImageView.getLayoutParams().width = item_width;pager = (ViewPager) findViewById(R.id.pager);// 初始化导航initNav();// 初始化viewPagerinitViewPager();}private void initViewPager() {fragments = new ArrayList<Fragment>(); for (int i = 0; i < 7; i++) { Bundle data = new Bundle(); data.putString("text", (i+1)+""); BaseFragment fragment = new BaseFragment(); fragment.setArguments(data); fragments.add(fragment);} MyFragmentPagerAdapter fragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragments);pager.setAdapter(fragmentPagerAdapter);fragmentPagerAdapter.setFragments(fragments);pager.setOnPageChangeListener(new MyOnPageChangeListener());pager.setCurrentItem(0);}private void initNav() {for (int i = 0 ; i < 7 ; i++) {RelativeLayout layout = new RelativeLayout(this);TextView view = new TextView(this);view.setText("第"+(i+1)+"个");RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);params.addRule(RelativeLayout.CENTER_IN_PARENT);layout.addView(view, params);mLinearLayout.addView(layout, (int)(mScreenWidth/4 + 0.5f), 50);layout.setOnClickListener(this);layout.setTag(i);}}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {return true;}private class MyFragmentPagerAdapter extends FragmentPagerAdapter {private ArrayList<Fragment> fragments; private FragmentManager fm; public MyFragmentPagerAdapter(FragmentManager fm) { super(fm); this.fm = fm; } public MyFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> fragments) { super(fm);this.fm = fm; this.fragments = fragments; } @Override public int getCount() { return fragments.size(); } @Override public Fragment getItem(int position) { return fragments.get(position); } @Override public int getItemPosition(Object object) { return POSITION_NONE; } public void setFragments(ArrayList<Fragment> fragments) {if(this.fragments != null){FragmentTransaction ft = fm.beginTransaction();for(Fragment f:this.fragments){ft.remove(f);}ft.commit();ft=null;fm.executePendingTransactions();}this.fragments = fragments;notifyDataSetChanged();}@Overridepublic Object instantiateItem(ViewGroup container, final int position) { Object obj = super.instantiateItem(container, position); return obj;}}public class MyOnPageChangeListener implements OnPageChangeListener {@Overridepublic void onPageSelected(final int position) {Animation animation = new TranslateAnimation(endPosition, position* item_width, 0, 0);beginPosition = position * item_width;currentFragmentIndex = position;if (animation != null) {animation.setFillAfter(true);animation.setDuration(0);mImageView.startAnimation(animation);mHorizontalScrollView.smoothScrollTo((currentFragmentIndex - 1) * item_width , 0);}}@Overridepublic void onPageScrolled(int position, float positionOffset,int positionOffsetPixels) {if(!isEnd){if(currentFragmentIndex == position){endPosition = item_width * currentFragmentIndex + (int)(item_width * positionOffset);}if(currentFragmentIndex == position+1){endPosition = item_width * currentFragmentIndex - (int)(item_width * (1-positionOffset));}Animation mAnimation = new TranslateAnimation(beginPosition, endPosition, 0, 0);mAnimation.setFillAfter(true);mAnimation.setDuration(0);mImageView.startAnimation(mAnimation);mHorizontalScrollView.invalidate();beginPosition = endPosition;}}@Overridepublic void onPageScrollStateChanged(int state) {if (state == ViewPager.SCROLL_STATE_DRAGGING) {isEnd = false;} else if (state == ViewPager.SCROLL_STATE_SETTLING) {isEnd = true;beginPosition = currentFragmentIndex * item_width;if (pager.getCurrentItem() == currentFragmentIndex) {// 未跳入下一个页面mImageView.clearAnimation();Animation animation = null;// 恢复位置animation = new TranslateAnimation(endPosition, currentFragmentIndex * item_width, 0, 0);animation.setFillAfter(true);animation.setDuration(1);mImageView.startAnimation(animation);mHorizontalScrollView.invalidate();endPosition = currentFragmentIndex * item_width;}}}}@Overridepublic void onClick(View v) {pager.setCurrentItem((Integer)v.getTag());}}
BaseFragment
package com.example.smooth;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;public class BaseFragment extends Fragment {private String text="";@Overridepublic void onCreate(Bundle savedInstanceState) {Bundle args = getArguments();text = args != null ? args.getString("text") : "";super.onCreate(savedInstanceState);}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {super.onCreateView(inflater, container, savedInstanceState);View view =inflater.inflate(R.layout.layout_1, null); TextView tv_fragment = (TextView) view.findViewById(R.id.tv_fragment);tv_fragment.setText(text);return view;}}
activity_main.xml
<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:orientation="vertical" tools:context=".MainActivity" ><HorizontalScrollView android:id="@+id/hsv_view" android:layout_width="match_parent"android:layout_height="50dp"android:fadingEdge="@null"android:scrollbars="none"android:background="@android:color/white" > <RelativeLayout android:layout_width="match_parent"android:layout_height="match_parent"> <LinearLayout android:id="@+id/hsv_content" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:gravity="center_vertical" ></LinearLayout> <ImageViewandroid:id="@+id/img1"android:layout_width="100dp"android:layout_height="4dp"android:background="#33b5e5"android:layout_alignParentBottom="true"/> </RelativeLayout></HorizontalScrollView><android.support.v4.view.ViewPager android:id="@+id/pager"android:layout_width="fill_parent"android:layout_height="fill_parent"> </android.support.v4.view.ViewPager></LinearLayout>
layout_1.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" android:background="@android:color/darker_gray"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="A" android:gravity="center" android:textSize="240sp" android:textColor="#33b5e5" android:id="@+id/tv_fragment" /></LinearLayout>
很简单有没有?但是!但是来咯!!
它这个是有7个分类,而我的项目只需要3个,所以我改变了数量,然后就发现问题了
滑动没有问题,问题出在点击的时候
当我点击第二个的时候,下划线停留在第二个下面,然后我点击第三个,发现下划线先回到第一个下面在滑到第三个下面,也就是说没有直接从第二个向第三个移动,不知道是否看得清晰
平移的起始点并没有问题,我实在想不出是哪里出了问题,不过我想明白了另外一件事,所谓的滑动导航,不过就是给下划线加个动画而已,想通了就容易解决了。~~~
首先在布局文件内,tab的下方添加一个view作为待会要移动的下划线
<View android:id="@+id/view1" android:layout_width="120dp" android:layout_height="3dp" android:background="#526CFD" />
动画代码跟以上的例子类似,增加了一个字体的改变
import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.util.DisplayMetrics;import android.view.View;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.TextView;import org.xutils.view.annotation.ContentView;import org.xutils.view.annotation.Event;import org.xutils.view.annotation.ViewInject;import java.util.ArrayList;import java.util.List;@ContentView(R.layout.fragment_customer)public class FragmentCustomer extends FragmentBase { @ViewInject(value = R.id.tv_custom_deal) TextView tvDeal; @ViewInject(value = R.id.tv_custom_target) TextView tvTarget; @ViewInject(value = R.id.tv_custom_agent) TextView tvAgent; @ViewInject(value = R.id.view1) View view1; @ViewInject(value = R.id.vp_view) ViewPager mViewPager; FragmentCustomerDeal fragDeal = new FragmentCustomerDeal(); FragmentCustomerTarget fragTarget = new FragmentCustomerTarget(); FragmentCustomerAgent fragAgent = new FragmentCustomerAgent(); private FragmentPagerAdapter mAdapter; private List<Fragment> mFragments = new ArrayList<Fragment>(); private int mScreenWidth; private int item_width; private int endPosition; private int beginPosition = 0; private int currentFragmentIndex; @Override public void onViewCreated(View view, Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); TAG = "======FragmentCustomer====="; LogOut("客户圈界面启动", TAG); DisplayMetrics dm = new DisplayMetrics(); activityBasic.getWindowManager().getDefaultDisplay().getMetrics(dm); mScreenWidth = dm.widthPixels; item_width = (int) ((mScreenWidth / 3.0 + 0.5f)); view1.getLayoutParams().width = item_width; mFragments.add(fragDeal); mFragments.add(fragTarget); mFragments.add(fragAgent); mAdapter = new FragmentPagerAdapter(getChildFragmentManager()) { @Override public int getCount() { return mFragments.size(); } @Override public Fragment getItem(int arg0) { return mFragments.get(arg0); } }; mViewPager.setAdapter(mAdapter); mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int position) { resetColor(); switch (position) { case 0: tvDeal.setTextColor(getResources().getColor(R.color.textChecked)); break; case 1: tvTarget.setTextColor(getResources().getColor(R.color.textChecked)); break; case 2: tvAgent.setTextColor(getResources().getColor(R.color.textChecked)); break; default: break; } currentFragmentIndex = position; Animation animation = new TranslateAnimation(beginPosition, position * item_width, 0, 0); beginPosition = position * item_width; if (animation != null) { animation.setFillAfter(true); animation.setDuration(0); view1.startAnimation(animation); } } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { if (currentFragmentIndex == position) { endPosition = item_width * currentFragmentIndex + (int) (item_width * positionOffset); } if (currentFragmentIndex == position + 1) { endPosition = item_width * currentFragmentIndex - (int) (item_width * (1 - positionOffset)); } Animation mAnimation = new TranslateAnimation(beginPosition, endPosition, 0, 0); mAnimation.setFillAfter(true); mAnimation.setDuration(0); view1.startAnimation(mAnimation); beginPosition = endPosition; } @Override public void onPageScrollStateChanged(int state) { } }); } public void resetColor() { tvDeal.setTextColor(getResources().getColor(R.color.TabNormal)); tvTarget.setTextColor(getResources().getColor(R.color.TabNormal)); tvAgent.setTextColor(getResources().getColor(R.color.TabNormal)); } @Event(value = {R.id.ll_custom_deal, R.id.ll_custom_target, R.id.ll_custom_agent}) private void onTabClick(View view) { resetColor(); switch (view.getId()) { case R.id.ll_custom_deal: tvDeal.setTextColor(getResources().getColor(R.color.textChecked)); mViewPager.setCurrentItem(0); currentFragmentIndex = 0; break; case R.id.ll_custom_target: tvTarget.setTextColor(getResources().getColor(R.color.textChecked)); mViewPager.setCurrentItem(1); currentFragmentIndex = 1; break; case R.id.ll_custom_agent: tvAgent.setTextColor(getResources().getColor(R.color.textChecked)); mViewPager.setCurrentItem(2); currentFragmentIndex = 2; break; default: break; } Animation animation = new TranslateAnimation(beginPosition, currentFragmentIndex * item_width, 0, 0); beginPosition = currentFragmentIndex * item_width; if (animation != null) { animation.setFillAfter(true); animation.setDuration(0); view1.startAnimation(animation); } }}
我记得我刚刚写仿网易新闻APP的时候我用的是viewpagerIndicator,其实现在这样看下来就只是加个动画而已,原来觉得很难很难的东西,想清楚了也就那么回事。多想想多交流!
阅读全文
0 0
- 滑动导航栏,标签页切换
- iOS中左右滑动切换,滑动标签页导航的设计思路
- iOS中左右滑动切换,滑动标签页导航的设计思路
- iOS中左右滑动切换,滑动标签页导航的设计思路
- iOS中左右滑动切换,滑动标签页导航的设计思路
- weui+swiper 滑动底部导航栏切换
- bootstrap_导航标签页的切换效果
- ViewPager实现滑动切换标签页
- UITabbarController左右滑动切换标签页
- android 可滑动、点击切换的导航栏
- ViewPager+Fragment滑动切换页面(RadioButton底部导航栏)
- JS实现导航栏项目自动切换标签样式
- weui+swiper 滑动底部导航栏切换 类似微信切换效果
- Android ViewPager多页面滑动切换以及底部滑动导航
- 滑动导航栏
- TabLayout 滑动导航栏
- 滑动导航栏固定
- Android滑动导航页
- 关于Eclipse 环境搭建的问题
- List 循环删除多个元素
- 比AlphaGo更可怕!10大黑科技或将改变人类未来
- mysql 将时间戳直接转换成日期时间
- 一行代码实现安卓照片选取上传服务器,并适配安卓7.0无法调起相机的问题
- 滑动导航栏,标签页切换
- C++builder RTL与VCl
- spring @Entity @Table
- Linux下查看网卡驱动和版本信息
- Java入门学习-学习static的用法
- 在CentOS 7.2上部署Kubernetes集群
- 哈利·波特的考试
- C++算法学习——预备知识(2)——函数模板
- 图片三级缓存