微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Android仿新闻顶部导航标签切换效果

分类：Android作者：编程之家AI导航网

最近由于个人兴趣原因,写了个模仿新闻顶部导航标签的demo。具体看下图。


那么大致上我们会用到这些知识。

1.Fragment
2.FragmentPagerAdapter
3.horizontalscrollview
4.PopupWindow

ok,那么首先进入第一步。

为了实现顶部的标签,我们要用到horizontalscrollview,因为原有的horizontalscrollview控件已经不能满足我们的使用了。所以这里就自定义一个horizontalscrollview

import android.app.Activity; 
import android.content.Context; 
import android.util.AttributeSet; 
import android.view.View; 
import android.widget.horizontalscrollview; 
import android.widget.ImageView; 
 
/** 
 * 自定义垂直滑动View 
 * 
 */ 
 
public class Columnhorizontalscrollview extends horizontalscrollview { 
 //传入的布局 
 private View ll_content; 
 //更多栏目的布局 
 private View ll_more; 
 //拖动栏布局 
 private View rl_colnmn; 
 //左阴影布局 
 private ImageView leftimage; 
 //右阴影布局 
 private ImageView rightimage; 
 //屏幕宽度 
 private int mScreenWidth =0; 
 //父类活动的activity 
 private Activity activity; 
 public Columnhorizontalscrollview(Context context) { 
  super(context); 
 } 
 
 public Columnhorizontalscrollview(Context context,AttributeSet attrs) { 
  super(context,attrs); 
 } 
 
 public Columnhorizontalscrollview(Context context,AttributeSet attrs,int defStyle) { 
  super(context,attrs,defStyle); 
 
 } 
 
 /** 
  * 拖动的时候执行的事件 
  * @param l 
  * @param t 
  * @param oldl 
  * @param oldt 
  */ 
 @Override 
 protected void onScrollChanged(int l,int t,int oldl,int oldt) { 
  super.onScrollChanged(l,t,oldl,oldt); 
  //先设置左右的阴影 
  shade_ShowOrHide(); 
  if(!activity.isFinishing() && ll_content != null && leftimage!= null && rightimage != null){ 
   if(ll_content.getWidth() <= mScreenWidth){ 
    leftimage.setVisibility(View.GONE); 
    rightimage.setVisibility(View.GONE); 
   } 
  }else { 
   return ; 
  } 
  if(l == 0){ 
   leftimage.setVisibility(View.GONE); 
   rightimage.setVisibility(View.VISIBLE); 
   return ; 
  } 
  if(ll_content.getWidth() - l + ll_more.getWidth() + rl_colnmn.getLeft() == mScreenWidth){ 
   leftimage.setVisibility(View.VISIBLE); 
   rightimage.setVisibility(View.GONE); 
   return ; 
  } 
  leftimage.setVisibility(View.VISIBLE); 
  rightimage.setVisibility(View.VISIBLE); 
 } 
 
 /** 
  * 传入父类的资源文件等 
  * @param activity 
  * @param mScreenWidth 
  * @param paramView1 
  * @param paramView2 
  * @param paramView3 
  * @param paramView4 
  * @param paramView5 
  */ 
 public void setParam(Activity activity,int mScreenWidth,View paramView1,ImageView paramView2,ImageView paramView3,View paramView4,View paramView5) 
 { 
  this.activity = activity; 
  this.mScreenWidth = mScreenWidth; 
  ll_content = paramView1; 
  leftimage = paramView2; 
  rightimage = paramView3; 
  ll_more = paramView4; 
  rl_colnmn = paramView5; 
 } 
 /** 
  * 判断左右阴影显示隐藏效果 
  */ 
 public void shade_ShowOrHide(){ 
  if(!activity.isFinishing() && ll_content != null){ 
   measure(0,0); 
   //如果整体的宽度小于屏幕的宽度的话,那左右阴影都隐藏 
   if(mScreenWidth >= getMeasuredWidth()){ 
    leftimage.setVisibility(View.GONE); 
    rightimage.setVisibility(View.GONE); 
   } 
  }else { 
   return ; 
  } 
  //如果滑动到最左边的时候,左边阴影隐藏,右边显示 
  if(getLeft() == 0){ 
   leftimage.setVisibility(View.GONE); 
   rightimage.setVisibility(View.VISIBLE); 
   return ; 
  } 
  //如果滑动在最右边的时候,左边阴影显示,右边隐藏 
  if(getRight() == getMeasuredWidth() - mScreenWidth){ 
   leftimage.setVisibility(View.VISIBLE); 
   rightimage.setVisibility(View.GONE); 
   return ; 
  } 
  //否则,说明在中间位置,左右阴影都显示 
  leftimage.setVisibility(View.VISIBLE); 
  rightimage.setVisibility(View.VISIBLE); 
 } 
}

完成之后，是不是需要编写Fragment 了? 为了显示图中的效果,这里我们就自定义一个,方便控制

import android.support.v4.app.Fragment; 
import android.os.Bundle; 
import android.support.annotation.Nullable; 
import android.util.Log; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.TextView; 
 
 
/** 
 * 自定义的Fragment类 
 */ 
 
public class NewsFragment extends Fragment { 
 String text; 
 
 @Override 
 public void onCreate(Bundle savedInstanceState) { 
  Bundle args = getArguments(); 
  text = args != null ? args.getString("text"):""; 
  super.onCreate(savedInstanceState); 
 } 
 
 @Nullable 
 @Override 
 public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState) { 
  View view = LayoutInflater.from(getActivity()).inflate(R.layout.news_fragment,null); 
  TextView item_textview = (TextView)view.findViewById(R.id.item_textview); 
  item_textview.setText(text); 
  return view; 
 
 } 
}

 news_fragment.xml

Ok,为了方便控制,我们来写个适配器 

import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentManager; 
import android.support.v4.app.FragmentPagerAdapter; 
import android.support.v4.app.FragmentTransaction; 
import android.view.ViewGroup; 
 
import java.util.ArrayList; 
 
/** 
 * 消息 Fragment 的适配器 
 */ 
 
public class NewsFragmentPagerAdapter extends FragmentPagerAdapter { 
 private ArrayList<Fragment> fragments;//定义一个集合管理所有的fragment 
 
 private FragmentManager fm;//fragment 管理器 
 
 public NewsFragmentPagerAdapter(FragmentManager fm,ArrayList<Fragment> fragments) { 
  super(fm); 
  this.fm = fm; 
  this.fragments = fragments; 
 } 
 @Override 
 public int getCount() { 
  return fragments.size(); 
 } 
 
 @Override 
 public android.support.v4.app.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(); 
 } 
 
 @Override 
 public Object instantiateItem(ViewGroup container,int position) { 
  Object obj = super.instantiateItem(container,position); 
  return obj; 
 } 
}

完成这些,就差不多开始编写Activity 的代码了。

import android.os.Bundle; 
import android.os.Handler; 
import android.os.Message; 
import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentActivity; 
import android.support.v4.view.ViewPager; 
import android.util.displayMetrics; 
import android.view.Gravity; 
import android.view.View; 
import android.widget.ImageView; 
import android.widget.LinearLayout; 
import android.widget.RelativeLayout; 
import android.widget.TextView; 
 
import java.util.ArrayList; 
 
 
/** 
 */ 
 
public class MainActivity extends FragmentActivity { 
 /**自定义的horizontalscrollview**/ 
 private Columnhorizontalscrollview mColumnhorizontalscrollview; 
 
 private LinearLayout mRadioGroup_content; 
 
 private LinearLayout ll_more_columns; 
 
 private RelativeLayout rl_colum; 
 
 private ViewPager mViewPager; 
 
 private ImageView button_more_columns; 
 
 private String[] news = new String[] { 
  "1","2","3","4","5","6","7","8","9","10" 
 }; 
 //当前选中的栏目 
 private int colnmuSelectIndex = 0; 
 //左阴影部分 
 public ImageView shade_left; 
 //右阴影部分 
 public ImageView shade_right; 
 //屏幕宽度 
 private int mScreenWidth = 0; 
 
 //Item 的高度 
 private int mItemWidth = 0; 
 
 private ArrayList<Fragment> fragments = new ArrayList<>(); 
 
 @Override 
 protected void onCreate(Bundle savedInstanceState) { 
  super.onCreate(savedInstanceState); 
 
  setContentView(R.layout.actiivty_top_news); 
  displayMetrics dm = new displayMetrics(); 
  getwindowManager().getDefaultdisplay().getMetrics(dm); 
  mScreenWidth = dm.widthPixels; 
  mItemWidth = mScreenWidth / 7;// 一个Item宽度为屏幕的1/7 
  intiViews(); 
 } 
 private final int SWITCH_PAGE = 0x00123; 
 
 private Handler mHandler = new Handler(){ 
  @Override 
  public void handleMessage(Message msg) { 
   super.handleMessage(msg); 
   switch (msg.what){ 
    case SWITCH_PAGE: 
     int selectIndex = msg.getData().getInt("selectIndex"); 
     for(int i = 0;i < mRadioGroup_content.getChildCount();i++){ 
      View localView = mRadioGroup_content.getChildAt(i); 
      if (i != selectIndex) 
       localView.setSelected(false); 
      else{ 
       localView.setSelected(true); 
       mViewPager.setCurrentItem(i); 
      } 
     } 
     break; 
   } 
  } 
 }; 
 /** 
  * 初始化组件 
  */ 
 protected void intiViews() { 
  mColumnhorizontalscrollview = (Columnhorizontalscrollview)findViewById(R.id.mColumnhorizontalscrollview); 
  mRadioGroup_content = (LinearLayout) findViewById(R.id.mRadioGroup_content); 
  ll_more_columns = (LinearLayout) findViewById(R.id.ll_more_columns); 
  rl_colum = (RelativeLayout) findViewById(R.id.rl_column); 
  button_more_columns = (ImageView) findViewById(R.id.button_more_columns); 
  mViewPager = (ViewPager) findViewById(R.id.mViewPager); 
  shade_left = (ImageView) findViewById(R.id.shade_left); 
  shade_right = (ImageView) findViewById(R.id.shade_right); 
  button_more_columns.setonClickListener(new View.OnClickListener() { 
   @Override 
   public void onClick(View v) { 
    // Todo Auto-generated method stub 
   } 
  }); 
  setChangelView(); 
 } 
 /** 
  * 当栏目项发生变化时候调用 
  * */ 
 private void setChangelView() { 
  // initColumnData(); 
  initTabColumn(); 
  initFragment(); 
 } 
 /** 
  * 初始化Column栏目项 
  * */ 
 private void initTabColumn() { 
  //先删除所有的控件 
  mRadioGroup_content.removeAllViews(); 
  //获取所有的结合 
  int count = news.length; 
  //设置自定义的所有布局 
  mColumnhorizontalscrollview.setParam(this,mScreenWidth,mRadioGroup_content,shade_left,shade_right,ll_more_columns,rl_colum); 
  for(int i = 0; i< count; i++){ 
   LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(mItemWidth,ViewPager.LayoutParams.WRAP_CONTENT); 
   params.leftMargin = 10; 
   params.rightMargin = 10; 
   TextView localTextView = new TextView(this); 
   localTextView.setTextAppearance(this,R.style.top_category_scroll_view_item_text); 
   localTextView.setBackgroundResource(R.drawable.radio_buttong_bg); 
   localTextView.setGravity(Gravity.CENTER); 
   localTextView.setPadding(5,5,0); 
   localTextView.setId(i); 
   localTextView.setText(news[i]); 
   localTextView.setTextColor(getResources().getColorStateList(R.color.top_category_scroll_text_color_day)); 
   if(colnmuSelectIndex == i){ 
    localTextView.setSelected(true); 
   } 
   /** 
    * 设置点击事件 
    */ 
   localTextView.setonClickListener(new View.OnClickListener() { 
    @Override 
    public void onClick(View v) { 
     for(int i = 0;i < mRadioGroup_content.getChildCount();i++){ 
      View localView = mRadioGroup_content.getChildAt(i); 
      if (localView != v) 
       localView.setSelected(false); 
      else{ 
       localView.setSelected(true); 
       mViewPager.setCurrentItem(i); 
      } 
     } 
    } 
   }); 
   mRadioGroup_content.addView(localTextView,i,params); 
  } 
 } 
 /** 
  * 选择的Column里面的Tab 
  * */ 
 private void selectTab(int tab_postion) { 
  colnmuSelectIndex = tab_postion; 
  for (int i = 0; i < mRadioGroup_content.getChildCount(); i++) { 
   View checkView = mRadioGroup_content.getChildAt(tab_postion); 
   int k = checkView.getMeasuredWidth(); 
   int l = checkView.getLeft(); 
   int i2 = l + k / 2 - mScreenWidth / 2; 
   mColumnhorizontalscrollview.smoothScrollTo(i2,0); 
  } 
  //判断是否选中 
  for (int j = 0; j < mRadioGroup_content.getChildCount(); j++) { 
   View checkView = mRadioGroup_content.getChildAt(j); 
   boolean ischeck; 
   if (j == tab_postion) { 
    ischeck = true; 
   } else { 
    ischeck = false; 
   } 
   checkView.setSelected(ischeck); 
  } 
 } 
 /** 
  * 初始化Fragment 
  * */ 
 private void initFragment() { 
  int count = news.length; 
  for(int i = 0; i< count;i++){ 
   Bundle data = new Bundle(); 
   data.putString("text",news[i]); 
   NewsFragment newfragment = new NewsFragment(); 
   newfragment.setArguments(data); 
   fragments.add(newfragment); 
  } 
  NewsFragmentPagerAdapter mAdapetr = new NewsFragmentPagerAdapter(getSupportFragmentManager(),fragments); 
  mViewPager.setAdapter(mAdapetr); 
  mViewPager.setonPagechangelistener(Pagelistener); 
 } 
 /** 
  * ViewPager切换监听方法 
  * */ 
 public ViewPager.OnPagechangelistener Pagelistener= new ViewPager.OnPagechangelistener(){ 
 
  @Override 
  public void onPageScrollStateChanged(int arg0) { 
  } 
 
  @Override 
  public void onPageScrolled(int arg0,float arg1,int arg2) { 
  } 
 
  @Override 
  public void onPageSelected(int position) { 
   // Todo Auto-generated method stub 
   mViewPager.setCurrentItem(position); 
   selectTab(position); 
  } 
 }; 
 
 
}

actiivty_top_news.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" > 
 
 
 <LinearLayout 
  android:layout_width="match_parent" 
  android:layout_height="40.0dip" 
  android:background="#fff3f3f3" 
  android:orientation="horizontal" > 
 
  <RelativeLayout 
   android:id="@+id/rl_column" 
   android:layout_width="match_parent" 
   android:layout_height="40.0dip" 
   android:layout_weight="1.0" > 
 
   <cn.com.topnews.ui.Columnhorizontalscrollview 
    android:id="@+id/mColumnhorizontalscrollview" 
    android:layout_width="match_parent" 
    android:layout_height="40.0dip" 
    android:scrollbars="none" > 
 
    <LinearLayout 
     android:id="@+id/mRadioGroup_content" 
     android:layout_width="fill_parent" 
     android:layout_height="40.0dip" 
     android:layout_centerVertical="true" 
     android:gravity="center_vertical" 
     android:orientation="horizontal" 
     android:paddingLeft="10.0dip" 
     android:paddingRight="10.0dip" /> 
   </cn.com.topnews.ui.Columnhorizontalscrollview> 
 
   <ImageView 
    android:id="@+id/shade_left" 
    android:layout_width="10.0dip" 
    android:layout_height="40.0dip" 
    android:layout_alignParentLeft="true" 
    android:layout_centerVertical="true" 
    android:background="@drawable/channel_leftblock" 
    android:visibility="gone" /> 
 
   <ImageView 
    android:id="@+id/shade_right" 
    android:layout_width="10.0dip" 
    android:layout_height="40.0dip" 
    android:layout_alignParentRight="true" 
    android:layout_centerVertical="true" 
    android:background="@drawable/channel_rightblock" 
    android:visibility="visible" /> 
  </RelativeLayout> 
 
  <LinearLayout 
   android:id="@+id/ll_more_columns" 
   android:layout_width="wrap_content" 
   android:layout_height="40.0dip" > 
 
   <ImageView 
    android:id="@+id/button_more_columns" 
    android:layout_width="40.0dip" 
    android:layout_height="40.0dip" 
    android:layout_gravity="center_vertical" 
    android:src="@drawable/channel_glide_day_bg" /> 
  </LinearLayout> 
 </LinearLayout> 
 
 <View 
  android:id="@+id/category_line" 
  android:layout_width="fill_parent" 
  android:layout_height="0.5dip" 
  android:background="#ffdddddd" /> 
 
 <android.support.v4.view.ViewPager 
  android:id="@+id/mViewPager" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" /> 
 
</LinearLayout>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

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

相关推荐

Android 性能优化——之控件的优化
Android性能优化——之控件的优化 前面讲了图像的优化，接下来分享一下控件的性能优化，这里主要是面向自定义View的优化。 1、首先先说一下我们在自定义View中可能会犯的3个错误： 1）UselesscallstoonDraw()：我们知道调用View.invalidate()会触发Vi...
android TextView描边
前言 上一篇已经讲了如何实现textView中粗字体效果，里面主要重写了onDraw方法。 这一边讲一个进阶功能，实现textView的描边效果。 上效果图。 上代码： 原理讲解： 效果实现思路是：因为系统api只给paint设置strokewidth方法，却没有提供设置描边的色值的方法，而且我们通
GreenDao教程1
最近项目重构，涉及到了数据库和文件下载，发现GreenDao这个框架还是不错的。直接面向对象的，可以通过对对象的操作，实现数据的存储。 但是官网上的API是在不敢恭维，文档写的很糙，看了半天，才搞懂一系列的流程。在此进行一下纪念。免得那天需要修改的时候，一脸懵逼。直接上干货 官网地址：http://
WebView加载页面的两种方式——网络页面和本地页面
WebView加载页面的两种方式 一、加载网络页面 加载网络页面，是最简单的一种方式，只需要传入http的URL就可以，实现WebView加载网络页面 代码如下图： 二、加载本地页面 1、加载assets目录下的HTML页面： 加载assets目录的页面，大多数可以用来做页面数据的存储打包，这样可以
Android 全局使用第三方字体
给APP全局设置字体主要分为两个方面来介绍 一、给原生界面设置第三方字体 1、准备工作-下载第三方字体：传送门 将文件放入工程assets目录下。（一般个人习惯单独命名一个文件夹放字体文件，也可直接放入根目录，但记得改引用路径） 2、代码实现 a、自定义application，将第三方的字体，替换当
Android中粗字体
前言 最近UI大牛出了一版新的效果图，按照IOS的效果做的，页面里面有普通字体、中粗字体、加粗字体。对于IOS的小伙伴，分分钟搞定，但是对于Android开发的我，瞬间懵逼了。WTF！ 安卓只有粗和不粗呀，哪有中粗这回事。硬着头皮做出来一版之后，看到UI嫌弃的表情。深深的刺痛了我的完美心。说啥也要搞
TabLayout基本使用
前言 Tablayout继承自HorizontalScrollView，可以用作顶部标签效果、底部导航栏效果。一般多与ViewPager一起使用。 想直接了解如何实现短下滑效果的请看：TabLayout的高级用法 首先上几个效果图。 图： 使用方法 下面我们来看如何使用， 第一步，先在gradle引
AndroidStudio 各种异常情况处理大法
最近使用AndroidStudio出现了.java文件，显示为xml文件等问题，通过各种采坑之后，发现删除本地的缓存文件这个方法最管用，差不多可以根治95%的莫名其妙的问题。解决办法如下； 先将AS关闭，然后找到你电脑的目录C:\Users\用户名\.AndroidStudio3.5\system\
Android文件各种存储路径的比较
1、File cacheDir = context.getCacheDir(); 应用内部存储空间（数据文件私有）文件存储到这个路径下，不需要申请权限，当应用被卸载的时候，目录下的文件会被删除。 需要注意的是，这个文件的目录和应用的存储位置有关， 当应用被移动到外部存储设备的时候，文件的绝对路径也是
汉诺塔问题
汉诺塔问题 最近面试题遇到过汉诺塔的问题，当时竟然懵逼了，不会了！！大学研究的问题竟然都忘光了，于是抓紧捡起来。然而在网上看了看博客，发现非递归算法还真挺多。下面总结了一下。 一、递归算法 1、递归算法优缺点：递归算法算是最易于理解也是最容易实现的，但是对内存的消耗也是巨大的，因为递归需要系统堆栈来
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native