Android Studioの素晴らしいケース(七)『ToolBar使用詳細』

このコラムを転載し、出典を明記し、オリジナルを尊重してください.ブログアドレス:道龍のブログ
ブログを参照:http://blog.csdn.net/h_zhang/article/details/51232773
        http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1118/2006.html
Android5.x以降、グーグルはMaterial Designのデザインを大いに推奨し、以前のAndroid styleスタイルの乱れを統一しようとした.前のブログではActionBarの使用を学びました.以前は多くの方法でActionBarを深くカスタマイズしていたので、使い勝手が悪く、toolbarはandroid 5として使用していました.xが導入した新しいコントロールは、ActionBarのアップグレード版と理解され、Actionbarを大幅に拡張し、より柔軟に使用され、actionbarほど固定されていないため、単純にActionBarを使用するのは少し時代遅れであり、そのいくつかの方法は時代遅れで表記されている.Toolbarは一般的なView要素のようで、viewツリーシステムの任意の位置に置くことができ、アニメーションを適用することができ、scrollViewに従ってスクロールすることができ、レイアウトの他のviewとインタラクティブになることができるなど、とにかく強いです.この記事ではAndroid 5を紹介します.x新しい特性のToolbarとThemeの使用は、多くの博文と書籍を参考にして、ここでまとめて、ゼロから、ToolBarの使用を教えてあげます.
アプリケーションでapp barを使用すると、次の利点があります.1.ユーザーが置かれている現在の位置を表示できます. 2. 検索(search)操作などの重要なインタラクティブな操作を提供することができます. 3. ナビゲーション機能を実現し、ユーザーをホームActivityに迅速に戻すことができる.
ここでは、Android Toolbarの使い方を紹介します.
まず画像を見てみましょう.下ではこの画像の内容に絶えず出会うからです.

属性の意味を簡単に説明します.
colorPrimaryDark:ステータスバーの色(浸透効果を実現するために使用可能)
color Primary:Toolbarの背景色(xmlではandroid:background="?attr/color Primary"で指定)
Android:textColorPrimary:Toolbarの文字の色は、設定後もMenu Itemのフォントの色が付きます
colorAccent:EditText入力中、RadioButton選択時の色
WindowBackground:下部ナビゲーションバーの色
app:title="App Title":ToolbarのApp Title
app:subtitle="Sub Title":Toobarの見出し
app:navigationIcon=”@android:drawable/ic_menu_sort_by_size":ナビゲーションアイコン(ロゴとの違いに注意)
Toolbarの使用について以下の点から理解します.

Toolbarの基本使用

Toolbar構成トピックTheme

Toolbarでよく使われるコントロール設定

Toolbarのカスタム

Toolbarの基本使用
私たちは以下の点から一歩一歩Toolbarの使用を学びます.

Style(スタイル)

Layout(レイアウト)

Activity(コード)

スタイル
あなたのActivityでToolbarを使うためには、プロジェクトでstylesを修正しなければなりません.xmlファイルのテーマスタイル、システムのデフォルトは以下の通りです.

Toolbarでよく使用されるコントロールの設定
各プロパティは説明されず、コメントははっきりしています.文章の冒頭の画像に向かって、携帯電話の画面のどの位置に対応しているかを理解することができます.Toolbarがこれらのテーマをどのように使用するかを見てみましょう.
構成activity_main.xmlのToolbarは次のように変更されました.

上のToolbar構成に比べて、ここには多くのコードが追加されています. 。app ， MD 。 ：


android:background="?attr/colorPrimary"

それは私のこのToolBarのスタイル全体を表しています.使用しますか?attrは全参照を表し、カスタムスタイル全体の内容が私のtooBarに有効になります.?/attr/actionBarSizeは、画面の解像度に応じてシステムのデフォルトの高さを採用することを示します. UI Toolbar， activity Toolbar, Toolbar id android:id=”@+id/toolbar”。 。
toobar

        getSupportActionBar().setDisplayShowTitleEnabled(false);
       toolbar.setTitle("   ");
        toolbar.setSubtitle("   ");
        //           
        toolbar.setSubtitleTextColor(Color.WHITE);
        //  logo。    logo          
        toolbar.setLogo(R.mipmap.ic_action_select_all);
        //        
        toolbar.setNavigationIcon(R.mipmap.img_menu);

注釈は詳しく書かれているでしょう.
Toolbarは、Title(メインタイトル)、Subtitle(サブタイトル)、Logo(ロゴアイコン)、NavigationIcon(ナビゲーションボタン)を設定できます.
toolbarを通過したいならsettitle(「メインタイトル」);Toolbarのタイトルを設定するには、呼び出す前に次のコードを呼び出す必要があります.

getSupportActionBar().setDisplayShowTitleEnabled(false);

上のコードはシステムのデフォルトのTitleを隠すために使用され、この行のコードは指定されず、コード設定Titleは効果がありません.
もう一つの方法はtoobarをsetTitle();setSupportAction(toobar)に配置します.以前も正常に展示できました.
以上のように配置して効果図を見てみましょう.

もちろん、同じ効果をレイアウトファイルで追加することもできます.個人的にはコードを使って追加するのが好きです.レイアウトファイルの追加については、app:titleプロパティでToolbarのタイトルを設定し、app:logoプロパティでToolbarのアイコンを設定します.また、app:titleTextColorプロパティでタイトル文字の色などを設定することもできます.
では、ToolbarはMenuメニュー機能を使うことができますか?答えは肯定的だ.以下のmenuメニューをロードしたToolbarを見てみましょう
先ほどのmain_を修正menu.xmlのコード:

どのようにmenuの各Itemにクリックイベントを追加しますか?Toolbarは次の方法を提供してくれました

        //  
        //    （     onOptionItemSelected()         ，           ）
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_edit:
                        Toast.makeText(MainActivity.this, "    ", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_share:
                        Toast.makeText(MainActivity.this, "    ", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_settings:
                        Toast.makeText(MainActivity.this, "    ", Toast.LENGTH_SHORT).show();
                        break;
                }
                return false;
            }
        });

これで、Toolbarの追加コントロールはほぼ終わり、効果は以下の通りです.

効果はまあまあですが、次は足取りについて行きましょう.ToolBarのスタイルを変更します.
スタイルファイルで、次のように変更します.

上から変更すると、スタイルは次の状態に変更されます.

デフォルトのナビゲーションを使用して、前のアクティビティを返します.
ナビゲーションボタンは、appのメインインタフェースに簡単に戻ることができ、非常に良いユーザー体験を生み出すことができます.Toolbarにナビゲーションボタンを追加する機能も簡単です.manifestファイルでandroid:parentActivity Nameプロパティを使用してActivityにparent activity 2を構成します.コードにActionBarを通す.setDisplayHomeAsUpEnabled(true)メソッドによるナビゲーションボタン
次に実現して、まず準備をします.トップページにボタンを追加します.activity_main.xml :

相当简单，就是增加了一个Button按钮，点击button执行start()方法。
MainActivity.java :

public void next(View view)
{
    Intent i = new Intent(this, ChildActivity.class);
    startActivity(i);
}

メソッドは、Nextactivityを起動します.
Nextactivity.java :

public class NextActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_next);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        ActionBar ab = getSupportActionBar();

        //  app bar     
        ab.setDisplayHomeAsUpEnabled(true);

    }
}

ActionBarのインスタンスはgetSupportActionBar()メソッドによって得られる.ActionBarのsetDisplayHomeAsUpEnabled()イネーブル機能を呼び出します.
次にchild activityのレイアウトファイルを見てみましょう

何も言うことはありません.上の紹介をしたことがあると信じています.簡単そうに見えます.
最後に、manifestファイルでChildActivityにparent Activityを指定します.

Android:parentActivity NameプロパティでChildActivityのparent Activityを指定します.注意:meta-dataラベルはandroid 4.0以下のバージョンに対応するためです.プログラム実行効果図:

ToolBarのサブボタンを追加し、すべてのコントロールにクリックイベントを追加します.
実はtooBarでは、直接レイアウトで子供のレイアウトを追加することができます.
メインレイアウトに次のコードを追加します.

最后把主活动中的代码贴一下，相当于对上边知识点做一个汇总

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Toolbar mToolbar;
    private PopupWindow mPopupWindow;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        //  ToolBar  ActionBar
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowTitleEnabled(false);
        //        
        mToolbar.setTitle("title");
        mToolbar.setTitleTextColor(Color.YELLOW);

        //        
        mToolbar.setSubtitle("sub");
        mToolbar.setSubtitleTextColor(Color.parseColor("#80ff0000"));


        //        ，               ，           。
        mToolbar.setNavigationIcon(R.mipmap.img_menu);


        //  

        //1、  NavigationIcon     ,    setSupportActionBar        ,
        //  setSupportActionBar    setNavigationOnClickListener
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(), "click NavigationIcon", Toast.LENGTH_SHORT).show();
            }
        });


        //2、Menu       。    （     onOptionItemSelected()         ，           ）
        mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_edit:
                        Toast.makeText(MainActivity.this, "    ", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_share:
                        Toast.makeText(MainActivity.this, "    ", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_settings:
                        popUpMyOverflow();
                        break;
                }
                return true;
            }
        });

        //3、ToolBar          
        mToolbar.findViewById(R.id.tv_title).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(), "       ", Toast.LENGTH_SHORT).show();
            }
        });


    }

    /**
     *       popWindow
     */
    public void popUpMyOverflow() {

        //       
        Rect frame = new Rect();
        getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);

        //     +toolbar   
        int yOffset = frame.top + mToolbar.getHeight();

        if (null == mPopupWindow) {
            //   PopupWindow   
            View popView = getLayoutInflater().inflate(R.layout.action_overflow_popwindow, null);
            //popView popupWindow   ，ture  focusAble.
            mPopupWindow = new PopupWindow(popView,
                    ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT, true);
            //    BackgroundDrawable setOutsideTouchable(true)    
            mPopupWindow.setBackgroundDrawable(new ColorDrawable());
            //      。
            mPopupWindow.setOutsideTouchable(true);
            //      。
            mPopupWindow.setAnimationStyle(android.R.style.Animation_Dialog);
            //  Gravity，        。
            mPopupWindow.showAtLocation(mToolbar, Gravity.RIGHT | Gravity.TOP, 0, yOffset);
            //  popupWindow    item     
            popView.findViewById(R.id.ll_item1).setOnClickListener(this);
            popView.findViewById(R.id.ll_item2).setOnClickListener(this);
            popView.findViewById(R.id.ll_item3).setOnClickListener(this);
        } else {
            mPopupWindow.showAtLocation(mToolbar, Gravity.RIGHT | Gravity.TOP, 0, yOffset);
        }

    }

    //PopupWindow       
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.ll_item1:
                Toast.makeText(getApplicationContext(), "    ", Toast.LENGTH_SHORT).show();
                break;
            case R.id.ll_item2:
                Toast.makeText(getApplicationContext(), "  ", Toast.LENGTH_SHORT).show();
                break;
            case R.id.ll_item3:
                Toast.makeText(getApplicationContext(), "    ", Toast.LENGTH_SHORT).show();
                break;
        }
        //  PopWindow item ,   PopWindow
        if (null != mPopupWindow && mPopupWindow.isShowing()) {
            mPopupWindow.dismiss();
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // toolbar menu    
        getMenuInflater().inflate(R.menu.main_menu, menu);
        return true;
    }

    public void next(View view) {
        Intent intent = new Intent(this, NextActivity.class);
        startActivity(intent);
    }
}

次にpopupwindowのレイアウトです.

 
  
 
  



    

        

        
    

    

        

        
    

    

        

        
    
  
その後、効果を見てみましょう.
  
次の記事では、ActionViiewの追加、ActionProviderの追加、ToolBarのカスタマイズなど、ToolBarのより高度な使い方について説明します.
好きな友达はいいねをつけたり、ブログに注目したりして、スレ主を支持します.
グループチャット技術、Android開発交流グループ:497646615