AndroidはAppでTabバーをナビゲートする機能を実現します。

11943 ワード

and roid 浮遊するタb

まず、「お腹が空きましたか？」とTabバーに浮遊する効果図です。

上の図の「分類」、「並べ替え」、「選別」はappのトップに浮遊しています。状態はSrollView（ScrrollViewではないかもしれません。ここでとりあえずこのスライドするUIコントロールをScrrollViewとしてみましょう。）のスクロールによって変化します。このようなナビゲーションTabバーの浮遊の役割は、TabバーがSrollViewなどのスクロールに伴ってスクリーンの外に滑らないようにして、ユーザーとの間の相互性と利便性が増加していることをみんなが実感できると信じています。
上の効果を見て、皆さんの躍動感を信じて、始めましょう。
まず、Tabバーの状態変化は、SrollViewのスライド距離を監督することです。SrollViewのスライド距離はどうやって得られますか？もう一つの編を見てもいいです。「Android中ScrrollViewスライド距離モニターを実現する方法」、ここでは多くのことを述べました。
はい、上のものによってSrollViewスライドのモニターが得られました。これから考えるべき問題は、Tab欄の浮遊効果をどうやって実現するかということです。ここで与えられた方法は二つあります。まずWindowManagerを使って、Windowow Managerを使って動的に一つのViewを添加して上に浮遊します。二つ目はScrelViewの滑りに従ってTabバーの配置位置を絶えず再設定することです。
まず第一の実施方法を見てみます。まずxmlレイアウトです。
Activityのレイアウト、activitymain.xml：


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

  <RelativeLayout
    android:id="@+id/rl_title"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@color/colorPrimary">

    <ImageView
      android:id="@+id/iv_back"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerVertical="true"
      android:layout_marginLeft="10dp"
      android:src="@drawable/new_img_back" />

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:text="@string/app_name"
      android:textColor="@android:color/white"
      android:textSize="18sp" />

  </RelativeLayout>

  <com.yuqirong.tabsuspenddemo.view.MyScrollView
    android:id="@+id/mScrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="#cccccc"
      android:orientation="vertical">

      <ImageView
        android:id="@+id/iv_pic"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_bg_personal_page" />

      <include layout="@layout/tab_layout" />

      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="15dp"
        android:background="@android:color/white"
        android:orientation="horizontal">

      </LinearLayout>

      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="15dp"
        android:background="@android:color/white"
        android:orientation="horizontal">

      </LinearLayout>

      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="15dp"
        android:background="@android:color/white"
        android:orientation="horizontal">

      </LinearLayout>

      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="15dp"
        android:background="@android:color/white"
        android:orientation="horizontal">

      </LinearLayout>

      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="15dp"
        android:background="@android:color/white"
        android:orientation="horizontal">

      </LinearLayout>


      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="15dp"
        android:background="@android:color/white"
        android:orientation="horizontal">

      </LinearLayout>

      <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="15dp"
        android:background="@android:color/white"
        android:orientation="horizontal">

      </LinearLayout>
      
    </LinearLayout>
  </com.yuqirong.tabsuspenddemo.view.MyScrollView>
</LinearLayout>

Tabバーのレイアウト、tab_layout.xml：


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/ll_tab"
  android:layout_width="match_parent"
  android:layout_height="40dp"
  android:background="@color/colorPrimary"
  android:orientation="horizontal">

  <TextView
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:gravity="center"
    android:text="  "
    android:textColor="@android:color/white"
    android:textSize="18sp" />

  <TextView
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:gravity="center"
    android:text="  "
    android:textColor="@android:color/white"
    android:textSize="18sp" />

  <TextView
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:gravity="center"
    android:text="  "
    android:textColor="@android:color/white"
    android:textSize="18sp" />

</LinearLayout>

上の配置の多くの空白のLinear Layoutは主にSrollViewを引き延ばしています。効果図はこのようなものです。

そしてオンクレーツを見に来ました。


@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  getSupportActionBar().hide();
  setContentView(R.layout.activity_main);
  mScrollView = (MyScrollView) findViewById(R.id.mScrollView);
  mScrollView.setOnScrollListener(this);
  ll_tab = (LinearLayout) findViewById(R.id.ll_tab);
  windowManager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
}

私たちはまずonCreate(Bundle savedInstanceState)でScrelViewにスライド距離モニターを追加し、windowManagerの対象を得ました。もう一つ注意したいのは、getSupportActionBar().hide();を呼び出してタイトルバーを外しました。これはタイトルバーの存在によって、浮遊窓y軸の値を計算する際に、タイトルバーの高さを追加する必要があるからです。もちろん、タイトルバーを保留して計算する時、タイトルバーの高さを加えてください。
その後、onWindowFocusChanged(boolean hasFocus)において、Tabバーの高さ、getTop()値などが得られ、次のようにバックアップされる。


@Override
public void onWindowFocusChanged(boolean hasFocus) {
  super.onWindowFocusChanged(hasFocus);
  if (hasFocus) {
    tabHeight = ll_tab.getHeight();
    tabTop = ll_tab.getTop();
    scrollTop = mScrollView.getTop();
  }
}

その後、スライドモニタのコールバック方法onScroll(int scrollY)において、浮遊窓の表示を制御するか、非表示にするかを制御する。


@Override
public void onScroll(int scrollY) {
  Log.i(TAG, "scrollY = " + scrollY + ", tabTop = " + tabTop);
  if (scrollY > tabTop) {
 //      
    if (!isShowWindow) {
      showWindow();
    }
  } else {
 //      
    if (isShowWindow) {
      removeWindow();
    }
  }
}

上のコードは比較的簡単です。私が話しすぎなくてもいいです。以下はremoveWindow() 、showWindow()の2つの方法である。


//   window
private void removeWindow() {
  if (ll_tab_temp != null)
    windowManager.removeView(ll_tab_temp);
  isShowWindow = false;
}

//   window
private void showWindow() {
  if (ll_tab_temp == null) {
    ll_tab_temp = LayoutInflater.from(this).inflate(R.layout.tab_layout, null);
  }
  if (layoutParams == null) {
    layoutParams = new WindowManager.LayoutParams();
    layoutParams.type = WindowManager.LayoutParams.TYPE_PHONE; //      ，    2002，           ，       
    layoutParams.format = PixelFormat.RGBA_8888;
    layoutParams.flags = WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL
        | WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE; //      ，       ，        
    layoutParams.gravity = Gravity.TOP; //        
    layoutParams.width = WindowManager.LayoutParams.MATCH_PARENT;
    layoutParams.height = tabHeight;
    layoutParams.x = 0; //   X   
    layoutParams.y = scrollTop; //   Y   
  }
  windowManager.addView(ll_tab_temp, layoutParams);
  isShowWindow = true;
}

この二つの方法も簡単で、注釈もありますので、皆さんに分かります。
最後に、Android Manifest.xmlに浮遊窓の表示を申請する権限を忘れないでください。


<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

ここに来て、全体のコードはこれだけです。効果を見てみましょう。

このような方法でTabバーの浮遊機能を実現するという欠点があるということは、もしこのアプリが浮遊窓を表示する権限を与えられていないならば、この機能は鳥肌になるということです。
締め括りをつける
以上がこの文章のすべての内容です。ここの内容はAndroid開発者の皆さんの学習や仕事に役立つと思います。質問があれば、メッセージを残して交流してください。

Androidアプリは、ユーザー定義のフォントでの実現方法を使用しています。

AndroidがクールなCheckBox効果を実現