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

915 查看

网易新闻客户端：

博主要实现的效果：

代码：
view_header.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rl_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_homepage_header" >

<LinearLayout
    android:id="@+id/ll_header_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="10sp" >

    <Button
        android:id="@+id/btn_header_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_header_back" />
</LinearLayout>

<TextView
    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" />

</RelativeLayout>

activity_news.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<include layout="@layout/view_header_2" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:baselineAligned="false" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <TextView
            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" />

        <ImageView
            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" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <TextView
            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" />

        <ImageView
            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" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <TextView
            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" />

        <ImageView
            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" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <TextView
            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" />

        <ImageView
            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" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <TextView
            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" />

        <ImageView
            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" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <TextView
            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" />

        <ImageView
            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" />
    </RelativeLayout>
</LinearLayout>
</LinearLayout>

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


最近更新的内容
你可能感兴趣的文章

2025 - 快车库 - 我的知识库 重庆启连科技有限公司 渝ICP备16002641号-10
企客连连 表单助手 企服开发 榜单123

渝公网安备 50010702501581号