Android Material Design-UI

Material Designがこんなに長い間出てきました.今日は暇を見つけてMaterial Designが新たに追加したUIをまとめて、まとめましょう.まずgradleスクリプトに追加

compile 'com.android.support:design:22.2.0'

次にデザインバッグに何が入っているか見てみましょう.このようなUIが多く見られます.

AppBarLayout

CollapsingToolbarLayout

CoordinatorLayout

FloatingActionButton

NavigationView

Snackbar

Tablayout

TextInputLayout

次に一つ一つ紹介します

AppBarLayout用法

<android.support.design.widget.AppBarLayout  
        android:id="@+id/appbar_layout"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:fitsSystemWindows="true"> 
        ...
</android.support.design.widget.AppBarLayout>

ToolBarやCollapsingToolbarLayoutなどに合わせて使用されるView Groupです.

CollapsingToolbarLayout伸縮性折り畳み可能なToobar、具体的な使い方はこの記事CollapsingToolbarLayout

を参照してください.

CoordinatorLayoutこれもviewgroup

です

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        >

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="#ffbb55"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#30469b"
            app:tabGravity="fill"
            app:layout_collapseMode="pin"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="#ff0000"
            app:tabTextColor="#ffffff" />
    </android.support.design.widget.AppBarLayout>


        <android.support.v4.view.ViewPager
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />


</android.support.design.widget.CoordinatorLayout>

このコントロールはDesignパッケージの下のコントロールでもありますが、このコントロールはDesignパッケージの中で最も複雑で、最も強力なコントロールと呼ばれます:CoordinatorLayout.どうしてそう言うのですか.なぜなら、多くのサブviewの間で協力し合うViewグループを組織しているからです.CoordinatorLayoutの不思議なところはBehaviorオブジェクトにある.どうやって理解しますか?CoordinatorLayoutはサブviewの間にお互いの存在を知るようにし,一つのサブviewの変化を別のサブviewに通知することができ,CoordinatorLayoutが行ったことは一つの通信の橋渡しとして異なるviewを接続し,Behaviorオブジェクトを用いて通信することである.たとえば、CoordinatorLayoutでAppBarLayoutを使用し、AppBarLayoutの子View(ToolBar、TabLayoutなど)にapp:layout_がマークされている場合scrollFlagsロールイベントでは、CoordinatorLayoutレイアウトにapp:layout_がマークされています.behaviorのサブView(LinearLayout、RecyclerView、NestedScrollViewなど)は、toolBar、TabLayoutなどのコントロールがマークされたスクロールイベントに応答することができる.上に少し間違いがあります.app:layout_とマークされています.behaviorのサブviewはReayclerViewでなければなりません.

FloatingActionButtonこのコントロールをImageButton用とすればよい.具体的な使い方はFloatingActionButton完全解析[Design Support Library(2)]を参考にしてあまりお話ししません.

NavigationView具体的な使い方百万のブログAndroid自身を参考にNavigationViewを実現[Design Support Library(1)]

Snackbar用法

Snackbar.make(textinputlayout,"quanshijie",Snackbar.LENGTH_LONG)
                .setAction("dosomething", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {

                    }
                })
                .show();

SnakBarは極めて多くの方法を提供しており、表示時間の設定、ActionText色の設定、アニメーションへのアクセス、アニメーションの終了などが見られます.

TabLayout

<android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#30469b"
            app:tabGravity="fill"
            app:layout_collapseMode="pin"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="#ff0000"
            app:tabTextColor="#ffffff" />

一般的にtablayoutはviewpagerと合わせて使用されます.

ViewPager mViewpager = (ViewPager) findViewById(R.id.viewpager);
        MyviewPagerAdapter adapter=new MyviewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new FragmentDemo(),"Tab one");
        adapter.addFragment(new FragmentDemo(),"Tab two");
        adapter.addFragment(new FragmentDemo(),"Tab three");
        adapter.addFragment(new FragmentDemo(),"Tab four");
        adapter.addFragment(new FragmentDemo(), "Tab five");
        mViewpager.setAdapter(adapter);

        TabLayout mTablayout = (TabLayout) findViewById(R.id.tabLayout);
        mTablayout.addTab(mTablayout.newTab().setText("1"));
        mTablayout.addTab(mTablayout.newTab().setText("2"));
        mTablayout.addTab(mTablayout.newTab().setText("3"));
        mTablayout.setupWithViewPager(mViewpager);

mTablayout.setupWithViewPager(mViewpager);

これでtablayoutとviewpagerを関連付けました.

TextInputLayout

<android.support.design.widget.TextInputLayout
        android:id="@+id/textinputlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:hint="user_password" />
    </android.support.design.widget.TextInputLayout>

内部にはEditTextが1つしかありません

textinputlayout= (TextInputLayout) findViewById(R.id.textinputlayout);
        textinputlayout.getEditText().addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {
                if (textinputlayout.getEditText().getText().length()<6){
                    textinputlayout.setErrorEnabled(true);
                    textinputlayout.setError("        6 ");
                }else{
                    textinputlayout.setErrorEnabled(false);
                }
            }
        });

最後に、メインの芝居が来ました.コントロールに何の属性があるか分からない学生もいます.大丈夫です.ここで方法をあげます.カスタムコントロールを書くときにattrを書くことを知っています.xmlファイルの書き込みプロパティ.xmlファイルに参照されます.同様にdesignを使用するときも引用しました.引用したのはどこですか.Designバッグの下にあります.values.xmlファイルの下を見てください.その下に属性があります.例えば

<declare-styleable name="FloatingActionButton">
    <attr name="android:background"/>
    <attr name="backgroundTint"/>
    <attr name="backgroundTintMode"/>
    <attr format="color" name="rippleColor"/>
    <attr name="fabSize">
        <enum name="normal" value="0"/>
        <enum name="mini" value="1"/>
    </attr>
    <attr name="elevation"/>
    <attr format="dimension" name="pressedTranslationZ"/>
    <attr format="dimension" name="borderWidth"/>
</declare-styleable>

これはコントロールにどのような属性があるかを知っています.はい、今日はここまでです.