android实现标签功能,Android 实现仿网易新闻等主流新闻客户端顶部标签导航效果(GONE和INVISIBLE的区别)...

网易新闻客户端：

博主要实现的效果：

代码：

view_header.xml:

android:id="@+id/rl_header"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@drawable/bg_homepage_header" >

android:id="@+id/ll_header_left"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:padding="10sp" >

android:id="@+id/btn_header_left"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/bg_header_back" />

android:id="@+id/tv_header_title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:textColor="@color/white"

android:textSize="25sp" />

activity_news.xml:

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:baselineAligned="false" >

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1" >

android:id="@+id/tv_headline"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:gravity="center"

android:text="@string/btn_homepage_headline"

android:textColor="@color/color_news_title_unchecked" />

android:id="@+id/view_news_headline"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@id/tv_headline"

android:layout_marginTop="8dp"

android:background="@drawable/bg_news_pressed"

android:contentDescription="@null"

android:visibility="invisible" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1" >

android:id="@+id/tv_international"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:gravity="center"

android:text="@string/btn_homepage_internation"

android:textColor="@color/color_news_title_unchecked" />

android:id="@+id/view_news_internation"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/tv_international"

android:layout_marginTop="8dp"

android:background="@drawable/bg_news_pressed"

android:visibility="invisible" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1" >

android:id="@+id/tv_inland"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:gravity="center"

android:text="@string/btn_homepage_inland"

android:textColor="@color/color_news_title_unchecked" />

android:id="@+id/view_news_inland"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/tv_inland"

android:layout_marginTop="8dp"

android:background="@drawable/bg_news_pressed"

android:visibility="invisible" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1" >

android:id="@+id/tv_video"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:gravity="center"

android:text="@string/btn_homepage_video"

android:textColor="@color/color_news_title_unchecked" />

android:id="@+id/view_news_video"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/tv_video"

android:layout_marginTop="8dp"

android:background="@drawable/bg_news_pressed"

android:visibility="invisible" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1" >

android:id="@+id/tv_appraisal"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:gravity="center"

android:text="@string/btn_homepage_appraisal"

android:textColor="@color/color_news_title_unchecked" />

android:id="@+id/view_news_appraisal"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/tv_appraisal"

android:layout_marginTop="8dp"

android:background="@drawable/bg_news_pressed"

android:visibility="invisible" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1" >

android:id="@+id/tv_complaint"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:gravity="center"

android:text="@string/btn_homepage_complaint"

android:textColor="@color/color_news_title_unchecked" />

android:id="@+id/view_news_complaint"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/tv_complaint"

android:layout_marginTop="8dp"

android:background="@drawable/bg_news_pressed"

android:visibility="invisible" />

看了xml文件相信所有人都明朗了吧，其实每个选项卡都是TextView+ImageView的组合

News.java:

public class News extends Activity {

private LinearLayout ll_top_left;

private TextView tv_title;

private TextView btn_headline, btn_internation, btn_inland, btn_video, btn_appraisal,

btn_complaint;

private ImageView view_headline, view_internation, view_inland, view_video, v iew_appraisal,

view_complaint;

private int type = 0;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_news);

initHeader();

initTab();

}

private void initHeader() { //标题栏操作

ll_top_left = (LinearLayout) findViewById(R.id.ll_header_left);

tv_title = (TextView) findViewById(R.id.tv_header_title);

tv_title.setText(getString(R.string.head_title_news));

ll_top_left.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

finish();

}

});

}

private void initTab() {

btn_headline = (TextView) findViewById(R.id.tv_headline);

btn_internation = (TextView) findViewById(R.id.tv_international);

btn_inland = (TextView) findViewById(R.id.tv_inland);

btn_video = (TextView) findViewById(R.id.tv_video);

btn_appraisal = (TextView) findViewById(R.id.tv_appraisal);

btn_complaint = (TextView) findViewById(R.id.tv_complaint);

view_headline = (ImageView) findViewById(R.id.view_news_headline);

view_internation = (ImageView) findViewById(R.id.view_news_internation);

view_inland = (ImageView) findViewById(R.id.view_news_inland);

view_video = (ImageView) findViewById(R.id.view_news_video);

view_appraisal = (ImageView) findViewById(R.id.view_news_appraisal);

view_complaint = (ImageView) findViewById(R.id.view_news_complaint);

//设置监听事件

btn_headline.setOnClickListener(new MyTabClickListener());

btn_internation.setOnClickListener(new MyTabClickListener());

btn_inland.setOnClickListener(new MyTabClickListener());

btn_video.setOnClickListener(new MyTabClickListener());

btn_appraisal.setOnClickListener(new MyTabClickListener());

btn_complaint.setOnClickListener(new MyTabClickListener());

onType(type);

}

private class MyTabClickListener implements OnClickListener {

@Override

public void onClick(View v) {

onFocused(v.getId());

switch (v.getId()) {

case R.id.tv_headline:

type = 1;

break;

case R.id.tv_international:

type = 2;

break;

case R.id.tv_inland:

type = 3;

break;

case R.id.tv_video:

type = 4;

break;

case R.id.tv_appraisal:

type = 5;

break;

case R.id.tv_complaint:

type = 6;

break;

default:

break;

}

//这里可以进行点击相应选项卡后进行的触发事件，一般为显示新闻页面

}

}

private void initTabState(){ 每次点击新的选项卡都调用此方法将所有选项卡都置换为未点击状态，这么做是有点麻烦，但是我还没想到更加优雅的方法囧...

view_headline.setVisibility(View.INVISIBLE);

view_internation.setVisibility(View.INVISIBLE);

view_inland.setVisibility(View.INVISIBLE);

view_video.setVisibility(View.INVISIBLE);

view_appraisal.setVisibility(View.INVISIBLE);

view_complaint.setVisibility(View.INVISIBLE);

btn_headline.setTextColor(getResources().getColor(R.color.color_news_title_unchecked));

btn_internation.setTextColor(getResources().getColor(R.color.color_news_title_unchecked));

btn_inland.setTextColor(getResources().getColor(R.color.color_news_title_unchecked));

btn_video.setTextColor(getResources().getColor(R.color.color_news_title_unchecked));

btn_appraisal.setTextColor(getResources().getColor(R.color.color_news_title_unchecked));

btn_complaint.setTextColor(getResources().getColor(R.color.color_news_title_unchecked));

}

private void onFocused(int fid) { 点击选项卡时调用的方法

initTabState();

switch (fid) {

case R.id.tv_headline:

view_headline.setVisibility(View.VISIBLE);

btn_headline.setTextColor(getResources().getColor(R.color.color_news_title_checked));

break;

case R.id.tv_international:

view_internation.setVisibility(View.VISIBLE);

btn_internation.setTextColor(getResources().getColor(R.color.color_news_title_checked));

break;

case R.id.tv_inland:

view_inland.setVisibility(View.VISIBLE);

btn_inland.setTextColor(getResources().getColor(R.color.color_news_title_checked));

break;

case R.id.tv_video:

view_video.setVisibility(View.VISIBLE);

btn_video.setTextColor(getResources().getColor(R.color.color_news_title_checked));

break;

case R.id.tv_appraisal:

view_appraisal.setVisibility(View.VISIBLE);

btn_appraisal.setTextColor(getResources().getColor(R.color.color_news_title_checked));

break;

case R.id.tv_complaint:

view_complaint.setVisibility(View.VISIBLE);

btn_complaint.setTextColor(getResources().getColor(R.color.color_news_title_checked));

break;

}

}

private void onType(int type) { 触发监听事件后调用

initTabState();

switch (type) {

case 1:

view_headline.setVisibility(View.VISIBLE);

btn_headline.setTextColor(getResources().getColor(R.color.color_news_title_checked));

break;

case 2:

view_internation.setVisibility(View.VISIBLE);

btn_internation.setTextColor(getResources().getColor(R.color.color_news_title_checked));

break;

case 3:

view_inland.setVisibility(View.VISIBLE);

btn_inland.setTextColor(getResources().getColor(R.color.color_news_title_checked));

break;

case 4:

view_video.setVisibility(View.VISIBLE);

btn_video.setTextColor(getResources().getColor(R.color.color_news_title_checked));

break;

case 5:

view_appraisal.setVisibility(View.VISIBLE);

btn_appraisal.setTextColor(getResources().getColor(R.color.color_news_title_checked));

break;

case 6:

view_complaint.setVisibility(View.VISIBLE);

btn_complaint.setTextColor(getResources().getColor(R.color.color_news_title_checked));

break;

}

}

}

关于GONE和INVISIBLE的区别有一篇中文博客讲的比较好：http://blog.csdn.net/chindroid/article/details/8000713

当控件visibility属性为INVISIBLE时，界面保留了view控件所占有的空间；而控件属性为GONE时，界面则不保留view控件所占有的空间。