Android仿新闻顶部导航标签切换效果
程序员文章站
2024-03-01 20:25:22
最近由于个人兴趣原因,写了个模仿新闻顶部导航标签的demo。具体看下图。
那么大致上我们会用到这些知识。
1.fragment
2.fragmentpager...
最近由于个人兴趣原因,写了个模仿新闻顶部导航标签的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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。