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

Android 2019-08-11

最近由于个人兴趣原因,写了个模仿新闻顶部导航标签的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>

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

相关文章

Android 性能优化——之控件的优化
Android性能优化——之控件的优化 前面讲了图像的优化，接下...
android TextView描边
前言 上一篇已经讲了如何实现textView中粗字体效果，里面主要...
GreenDao教程1
最近项目重构，涉及到了数据库和文件下载，发现GreenDao这个...
WebView加载页面的两种方式——网络页面和本地页面
WebView加载页面的两种方式 一、加载网络页面 加载网络页面，...
Android 全局使用第三方字体
给APP全局设置字体主要分为两个方面来介绍 一、给原生界面设...
Android中粗字体
前言 最近UI大牛出了一版新的效果图，按照IOS的效果做的，页...