Android 實現仿網易新聞等主流新聞客戶端頂部標籤導航效果(GONE和INVISIBLE的區別)

時間 2020-01-01

標籤 android 實現網易主流客戶端頂部標籤導航效果 gone invisible 區別欄目 Android 简体版

原文原文鏈接

網易新聞客戶端：

博主要實現的效果：

代碼：
view_header.xml:java

<?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:android

<?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的組合segmentfault

News.java:app

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();
  }
});

}ide

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);

}spa

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;
  }
  //這裏能夠進行點擊相應選項卡後進行的觸發事件，通常爲顯示新聞頁面
}

}.net

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));

}code

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;
}

}xml

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;
}

}blog

}

關於GONE和INVISIBLE的區別有一篇中文博客講的比較好：http://blog.csdn.net/chindroid/article/details/8000713 當控件visibility屬性爲INVISIBLE時，界面保留了view控件所佔有的空間；而控件屬性爲GONE時，界面則不保留view控件所佔有的空間。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。