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

摘要：网易新闻客户端博主要实现的效果代码看了文件相信所有人都明朗了吧，其实每个选项卡都是的组合标题栏操作设置监听事件这里可以进行点击相应选项卡后进行的触发事件，一般为显示新闻页面每次点击新的选项卡都调用此方法将所有选项卡都置换为未点击状态，

网易新闻客户端：

博主要实现的效果：

代码：
view_header.xml:

activity_news.xml:

看了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控件所占有的空间。