欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-03-01 20:25:22
最近由于个人兴趣原因,写了个模仿新闻顶部导航标签的demo。具体看下图。 那么大致上我们会用到这些知识。 1.fragment 2.fragmentpager...

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

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

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

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> 

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