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

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

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