12個のMaterial Designスタイルコントロールの使用
65929 ワード
GitHub上のプロジェクトのアドレス:
https://github.com/Hebin320/MaterialDesignUse
CSDN上のダウンロードアドレス
http://download.csdn.net/detail/hebin320320/9658215
1、AppBarLayout、ToolBar
AppBarLayoutはLinerLayoutが実装したViewGroupコンテナコンポーネントを継承し、Material Designのために設計されたApp Barであり、ジェスチャースライド操作をサポートしています.AppBarLayoutはToolbarの親レイアウトコンテナとして使用する必要があり、CoordinatorLayoutと組み合わせて使用することもできます.ToolBarは、Googleが新しく発売したActionBarに代わるタイトルバーコントロールで、背景をステータスバーに広げることができ、依存パッケージはv 7で、使用する前にstyleで継承したテーマをNoActionBarに変更します.「タイトル」、「サブタイトル」、「ロゴ」、「NavigationIcon」および「Menuメニュー」を設定したり、レイアウトをカスタマイズしたりすることができます.
TextViewは中位のタイトルで、fitsystemWindows実装ステータスバー各バージョン適合案:1.Android 5.0以上:material designスタイル、半透明(アプリの内容がステータスに引き上げられない)2.Android 4.4(kitkat)以上5.0:全透明(アプリの内容がステータスに引き上げられない)3.Android 4.4(kitkat)以下:status barを占有せずにActivityにコードを追加すればToolBarを使用できます.
ToolBarのメニューレイアウト:
2、DrawerLayout、NavigationView
DrawerLayoutは引き出し効果を簡単に実現できます.DrawerLayoutでは、1番目の子Viewはコンテンツを表示するviewでなければなりません.2番目のviewは引き出しviewで、プロパティlayout_を設定します.gravity="left|right"は、左から出るか右から出るかを表します.使用前に追加する必要があります:
xmlのレイアウトコードは次のとおりです.
1つ目のレイアウトはFramelayoutを使用しており、引き出しバーのクリックで異なるFragmentを表示することができます.引き出しレイアウトはNavigationViewで、NavigationViewはいくつかの必要なパラメータ、1つのヘッダを表示するレイアウト、およびオプションを表示するためのメニューレイアウトを受信する必要があります.xmlにレイアウトを直接追加できます.
ヘッダレイアウトxmlコード:
オプションメニューのレイアウト:
ToolBarに合わせてActivityでの使用コード:
3、RecyclerView、CardView、AutoScrollViewPager
RecyclerViewは大量のデータを表示するためのコントロールで、ListView、GirdViewと少し似ています.それに比べて、RecyclerViewは柔軟性、体験感の面で大きな向上を遂げています.提供する異なるLayoutManagerを設定することで、ItemDecoration、ItemAnimatorは豊富な機能を実現することができます.依存パッケージはv 7です.RecyclerViewはListViewのようにHeaderやFooterを追加したりaddOnScrollListenerでページングロードしたりすることもできます.RecyclerviewにViewpagerをHeaderとして追加した例では、Recyclerviewを簡単に使用し、ViewpagerはGitHub上のオープンソースプロジェクトを使用し、自動マルチキャストを実現するAutoScrollViewPagerを使用しています.GitHubアドレスは次のとおりです.
HeaderはGitHub上のオープンソースプロジェクトRecyclerViewHeaderを通じて、RecyclerviewにHeaderを迅速に追加します.GitHubアドレスは次のとおりです.
依存パッケージを追加した後で適用できます.fragment_recyclerview.xmlのコード:
recyclerview_itemのコード:
RecyclerAdapter.classのコード
RecyclerVpAdapter.classのコード:
RecyclerFragment.classのコード:
上のRecyclerViewのitemレイアウトでは、親レイアウトはCardViewです.CardViewはFrameLayoutを継承し、自身にフィレットとシャドウ効果を追加できるレイアウトで、RecyclerView、ListView、GirdViewのitemレイアウトによく使われています.一般的に使用される属性は次のとおりです.
4、CoordinatorLayout、CollapsingToolbarLayout、TabLayout
(GIFが大きすぎて、サイズを圧縮してから、ちょっと問題があります)
CoordinatorLayoutは、サブview間のタッチイベントのレイアウトを別のレベルから制御し、CoordinatorLayoutのレイアウトでToolbarを使用して、外観とレイアウトの残りの部分をより自由にカスタマイズすることができます.AppBarLayoutを使用すると、TabLayoutのタブなどの他のViewとtoolbarがScrollingViewBehaviorとマークされたViewのスクロールイベントに応答できます.CollapsingToolbarLayout、伸縮可能な折りたたみToolbar、AppBarLayoutにToolbarを直接追加するとenterAlwaysCollapsedとexitUntilCollapsedscrollフラグを使用できますが、collapsingの詳細に異なる要素がどのように応答するかは制御できません.ここではCollapsingToolbarLayoutのapp:layout_を使用していますcollapseMode="pin"は、toolbarがviewで折り畳まれたときも画面の上部に固定されていることを確認します.Collapsingtoolbarrayoutとtoolbarを一緒に使用すると、titleは展開時に自動的に大きくなり、折り畳まれたときにフォントをデフォルト値に移行します.TabLayoutは、固定されたタブ(Viewの幅の平均配分)と、スクロール可能なタブ(Viewの幅が固定されず横スクロール可能)を実現しています.ViewPagerを使用してtab間を横断的に切り替える場合は、PagerAdapterのgetPageTitle()から直接タブを作成し、setupWithViewPager()を使用して両方を関連付けることができます.これにより、tabの選択イベントがViewPagerを更新し、同時にViewPagerのページがtabの選択状態を更新できるようになります.注意:図中のActivityの起動効果アニメーションは、次のコードで実現されます.
使用前にDesignを追加したパッケージを使用すると、この3つを使用できます.activity_appbar_detail.xmlマスターレイアウトコード:
RecyclerDetailActivity.classコード:
5、TextInputLayout
TextInputLayoutコントロールはLinearLayoutのように表現され、コンテナです.TextInputLayoutにはサブエレメントが1つしか入れられません.ScrolViewと少し似ています.サブエレメントはEditTextでなければなりません.TextInputLayoutが実現する機能は、EditTextに最初のアルファベットを入力してhintを隠すと、TextInputLayoutに浮かぶラベルが表示され、クールなmaterialアニメーションレイアウトコードを担当することです.
6、FloatingActionButton、Snackbar
レイアウトコード:
Fragmentのコード:
https://github.com/Hebin320/MaterialDesignUse
CSDN上のダウンロードアドレス
http://download.csdn.net/detail/hebin320320/9658215
1、AppBarLayout、ToolBar
AppBarLayoutはLinerLayoutが実装したViewGroupコンテナコンポーネントを継承し、Material Designのために設計されたApp Barであり、ジェスチャースライド操作をサポートしています.AppBarLayoutはToolbarの親レイアウトコンテナとして使用する必要があり、CoordinatorLayoutと組み合わせて使用することもできます.ToolBarは、Googleが新しく発売したActionBarに代わるタイトルバーコントロールで、背景をステータスバーに広げることができ、依存パッケージはv 7で、使用する前にstyleで継承したテーマをNoActionBarに変更します.「タイトル」、「サブタイトル」、「ロゴ」、「NavigationIcon」および「Menuメニュー」を設定したり、レイアウトをカスタマイズしたりすることができます.
.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="70dp"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
android:fitsSystemWindows="true"
>
"@+id/toolbar_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginStart="0dp"
android:gravity="center"
android:text="@string/app_name"
android:textColor="#FFFFFF"
android:textSize="20sp"
android:paddingTop="6dp"
android:paddingRight="40dp"
/>
.support.v7.widget.Toolbar>
.support.design.widget.AppBarLayout>TextViewは中位のタイトルで、fitsystemWindows実装ステータスバー各バージョン適合案:1.Android 5.0以上:material designスタイル、半透明(アプリの内容がステータスに引き上げられない)2.Android 4.4(kitkat)以上5.0:全透明(アプリの内容がステータスに引き上げられない)3.Android 4.4(kitkat)以下:status barを占有せずにActivityにコードを追加すればToolBarを使用できます.
mToolbar = (Toolbar) findViewById(R.id.toolbar);
tvToolTitle = (TextView) findViewById(R.id.toolbar_title);
tvToolTitle.setText(" ");
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
ToolBarのメニューレイアウト:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity" >
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="action_settings"
app:showAsAction="never"/>
menu> mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_settings:
break;
default:
break;
}
return true;
}
}); 2、DrawerLayout、NavigationView
DrawerLayoutは引き出し効果を簡単に実現できます.DrawerLayoutでは、1番目の子Viewはコンテンツを表示するviewでなければなりません.2番目のviewは引き出しviewで、プロパティlayout_を設定します.gravity="left|right"は、左から出るか右から出るかを表します.使用前に追加する必要があります:
compile 'com.android.support:design:23.3.0'xmlのレイアウトコードは次のとおりです.
"http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="70dp"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
android:fitsSystemWindows="true"
>
"@+id/toolbar_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginStart="0dp"
android:gravity="center"
android:text="@string/app_name"
android:textColor="#FFFFFF"
android:textSize="20sp"
android:paddingTop="6dp"
android:paddingRight="40dp"
/>
.support.v7.widget.Toolbar>
.support.design.widget.AppBarLayout>
.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
.support.design.widget.CoordinatorLayout
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
"@+id/frame_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/appbar"
android:scrollbars="none"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
.support.design.widget.CoordinatorLayout>
.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/navigation_header"
app:menu="@menu/drawer" />
.support.v4.widget.DrawerLayout>
1つ目のレイアウトはFramelayoutを使用しており、引き出しバーのクリックで異なるFragmentを表示することができます.引き出しレイアウトはNavigationViewで、NavigationViewはいくつかの必要なパラメータ、1つのヘッダを表示するレイアウト、およびオプションを表示するためのメニューレイアウトを受信する必要があります.xmlにレイアウトを直接追加できます.
app:headerLayout="@layout/navigation_header"
app:menu="@menu/drawer"ヘッダレイアウトxmlコード:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="192dp"
android:background="?attr/colorPrimaryDark"
android:gravity="center"
android:orientation="vertical"
android:padding="16dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/profile_image"
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_marginTop="20dp"
android:src="@mipmap/ic_launcher"
app:border_color="@color/primary_light"
app:border_width="2dp" />
<TextView
android:layout_marginTop="10dp"
android:textSize="18sp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=" "
android:gravity="center"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"
/>
LinearLayout>オプションメニューのレイアウト:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<group android:checkableBehavior="single">
<item
android:id="@+id/navigation_item_book"
android:icon="@mipmap/ic_stars_black_24dp"
android:title=" " />
<item
android:id="@+id/navigation_item_example"
android:icon="@mipmap/ic_brightness_7_black_24dp"
android:title=" " />
<item
android:id="@+id/navigation_item_blog"
android:icon="@mipmap/ic_flare_black_24dp"
android:title=" " />
<item
android:id="@+id/navigation_item_about"
android:icon="@drawable/ic_favorite"
android:title=" " />
group>
menu>ToolBarに合わせてActivityでの使用コード:
public class MainActivity extends AppCompatActivity implements BackHandledFragment.BackHandlerInterface {
private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mDrawerToggle;
private Toolbar mToolbar;
private BackHandledFragment selectedFragment;
private NavigationView mNavigationView;
private TextView tvToolTitle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mToolbar = (Toolbar) findViewById(R.id.toolbar);
tvToolTitle = (TextView) findViewById(R.id.toolbar_title);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open,
R.string.drawer_close);
mDrawerToggle.syncState();
mDrawerLayout.addDrawerListener(mDrawerToggle);
mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
setupDrawerContent(mNavigationView);
switchToBook();
}
private void switchToBook() {
getSupportFragmentManager().beginTransaction().replace(R.id.frame_content, new RecyclerFragment()).commit();
tvToolTitle.setText(" ");
}
private void switchToExample() {
getSupportFragmentManager().beginTransaction().replace(R.id.frame_content, new DayFragment()).commit();
tvToolTitle.setText(" ");
}
private void switchToBlog() {
getSupportFragmentManager().beginTransaction().replace(R.id.frame_content, new BlankFragment()).commit();
tvToolTitle.setText(" ");
}
private void switchToAbout() {
getSupportFragmentManager().beginTransaction().replace(R.id.frame_content, new TimeFragment()).commit();
tvToolTitle.setText(" ");
}
private void setupDrawerContent(NavigationView navigationView) {
navigationView.setNavigationItemSelectedListener(
new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
switch (menuItem.getItemId()) {
case R.id.navigation_item_book:
switchToBook();
break;
case R.id.navigation_item_example:
switchToExample();
break;
case R.id.navigation_item_blog:
switchToBlog();
break;
case R.id.navigation_item_about:
switchToAbout();
break;
}
menuItem.setChecked(true);
mDrawerLayout.closeDrawers();
return true;
}
});
}
@Override
public void setSelectedFragment(BackHandledFragment backHandledFragment) {
this.selectedFragment = backHandledFragment;
}
private long exitTime = 0;
public void doExitApp() {
if ((System.currentTimeMillis() - exitTime) > 2000) {
Toast.makeText(this, R.string.press_again_exit_app, Toast.LENGTH_SHORT).show();
exitTime = System.currentTimeMillis();
} else {
finish();
}
}
@Override
public void onBackPressed() {
if (selectedFragment == null || !selectedFragment.onBackPressed()) {
if (mDrawerLayout.isDrawerOpen(Gravity.LEFT)) {
mDrawerLayout.closeDrawer(Gravity.LEFT);
} else {
doExitApp();
}
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.test,menu);
return true;
}
}3、RecyclerView、CardView、AutoScrollViewPager
RecyclerViewは大量のデータを表示するためのコントロールで、ListView、GirdViewと少し似ています.それに比べて、RecyclerViewは柔軟性、体験感の面で大きな向上を遂げています.提供する異なるLayoutManagerを設定することで、ItemDecoration、ItemAnimatorは豊富な機能を実現することができます.依存パッケージはv 7です.RecyclerViewはListViewのようにHeaderやFooterを追加したりaddOnScrollListenerでページングロードしたりすることもできます.RecyclerviewにViewpagerをHeaderとして追加した例では、Recyclerviewを簡単に使用し、ViewpagerはGitHub上のオープンソースプロジェクトを使用し、自動マルチキャストを実現するAutoScrollViewPagerを使用しています.GitHubアドレスは次のとおりです.
https://github.com/Trinea/android-auto-scroll-view-pagerHeaderはGitHub上のオープンソースプロジェクトRecyclerViewHeaderを通じて、RecyclerviewにHeaderを迅速に追加します.GitHubアドレスは次のとおりです.
https://github.com/blipinsk/RecyclerViewHeader依存パッケージを追加した後で適用できます.fragment_recyclerview.xmlのコード:
"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
android:layout_gravity="center_horizontal|top"
android:layout_marginBottom="20dp"
/>
<com.bartoszlipinski.recyclerviewheader.RecyclerViewHeader
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="180dp"
android:layout_gravity="center_horizontal|top"
android:layout_marginBottom="20dp"
>
.trinea.android.view.autoscrollviewpager.AutoScrollViewPager
android:id="@+id/vp_books"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
/>
com.bartoszlipinski.recyclerviewheader.RecyclerViewHeader>
recyclerview_itemのコード:
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="170dp"
android:layout_margin="5dp"
android:clickable="true"
app:cardCornerRadius="4dp"
app:cardElevation="10dp">
<ImageView
android:id="@+id/ivBook"
android:transitionName="@string/transition_book_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
android.support.v7.widget.CardView>RecyclerAdapter.classのコード
public class RecyclerAdapter extends RecyclerView.Adapter {
private List list = new ArrayList<>();
private static final int ANIMATED_ITEMS_COUNT = 4;
private Activity context;
private boolean animateItems = false;
private int lastAnimatedPosition = -1;
public RecyclerAdapter(Activity context , List mlist) {
TypedValue mTypedValue = new TypedValue();
context.getTheme().resolveAttribute(R.attr.selectableItemBackground, mTypedValue, true);
list = updateItems(mlist,true);
this.context = context;
}
public class ViewHolder extends RecyclerView.ViewHolder {
public ImageView ivBook;
public int position;
public ViewHolder(View v) {
super(v);
ivBook = (ImageView) v.findViewById(R.id.ivBook);
}
}
private void runEnterAnimation(View view, int position) {
if (!animateItems || position >= ANIMATED_ITEMS_COUNT - 1) {
return;
}
if (position > lastAnimatedPosition) {
lastAnimatedPosition = position;
view.setTranslationY(Utils.getScreenHeight(context));
view.animate()
.translationY(0)
.setStartDelay(100 * position)
.setInterpolator(new DecelerateInterpolator(3.f))
.setDuration(700)
.start();
}
}
public List updateItems(List books, boolean animated) {
List list = new ArrayList<>();
animateItems = animated;
lastAnimatedPosition = -1;
list.addAll(books);
notifyDataSetChanged();
return list;
}
@Override
public RecyclerAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
int viewType) {
View v = LayoutInflater.from(parent.getContext())
.inflate(R.layout.recyclerview_item, parent, false);
ViewHolder vh = new ViewHolder(v);
return vh;
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
runEnterAnimation(holder.itemView, position);
RecyclerBean recyclerBean = list.get(position);
holder.ivBook.setBackgroundResource(recyclerBean.getImg());
}
@Override
public int getItemCount() {
return list.size();
}
public RecyclerBean getBook(int pos) {
return list.get(pos);
}
public RecyclerItemClickListener.OnItemClickListener onItemClickListener = new RecyclerItemClickListener.OnItemClickListener() {
@Override
public void onItemClick(View view, int position) {
RecyclerBean book = getBook(position);
Intent intent = new Intent(context, RecyclerDetailActivity.class);
intent.putExtra("book", book);
ActivityOptionsCompat options =
ActivityOptionsCompat.makeSceneTransitionAnimation(context,
view.findViewById(R.id.ivBook),context.getString(R.string.transition_book_img));
ActivityCompat.startActivity(context, intent, options.toBundle());
}
};
} RecyclerVpAdapter.classのコード:
public class RecyclerVpAdapter extends FragmentPagerAdapter {
ArrayList list;
FragmentManager fm;
public RecyclerVpAdapter(FragmentManager fm, ArrayList list) {
super(fm);
this.list = list;
this.fm = fm;
}
@Override
public int getCount() {
return list.size();
}
@Override
public Fragment getItem(int arg0) {
return list.get(arg0);
}
} RecyclerFragment.classのコード:
RecyclerView mRecyclerView = (RecyclerView) view.findViewById(R.id.recyclerView);
mRecyclerView.setHasFixedSize(true);
//ListView
// LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());
//GirdView
GridLayoutManager layoutManager = new GridLayoutManager(getContext(),2);
mRecyclerView.setLayoutManager(layoutManager);
RecyclerViewHeader header = (RecyclerViewHeader) view.findViewById(R.id.header);
AutoScrollViewPager viewPager = (AutoScrollViewPager) header.findViewById(R.id.vp_books);
ArrayList fragmentList = new ArrayList<>();
for (int i = 0; i < vpImgPath.length; i++) {
RecyclerVpFragment recyclerVpFragment = RecyclerVpFragment.newInstance(vpImgPath[i]);
fragmentList.add(recyclerVpFragment);
}
RecyclerVpAdapter bAdapter = new RecyclerVpAdapter(getChildFragmentManager(),fragmentList);
viewPager.setAdapter(bAdapter);
viewPager.setCurrentItem(0);
viewPager.startAutoScroll();
// Viewpager
header.attachTo(mRecyclerView,true);
for (int i = 0; i < title.length; i++) {
RecyclerBean recyclerBean = new RecyclerBean();
recyclerBean.setImg(imgPath[i]);
recyclerBean.setInfo(tvInfo[i]);
recyclerBean.setTitle(title[i]);
recyclerBean.setCatalog(title[i]);
recyclerBean.setAuthor_intro(title[i]);
recyclerBean.setSummary(title[i]);
recyclerBean.setImglarge(imgPath[i]);
mList.add(recyclerBean);
}
mAdapter = new RecyclerAdapter(getActivity(),mList);
//RecyclerView
mRecyclerView.addOnItemTouchListener(new RecyclerItemClickListener(getActivity(), mAdapter.onItemClickListener));
mRecyclerView.setAdapter(mAdapter); 上のRecyclerViewのitemレイアウトでは、親レイアウトはCardViewです.CardViewはFrameLayoutを継承し、自身にフィレットとシャドウ効果を追加できるレイアウトで、RecyclerView、ListView、GirdViewのitemレイアウトによく使われています.一般的に使用される属性は次のとおりです.
app:cardCornerRadius="4dp"
app:cardElevation="10dp"
android:foreground="?android:attr/selectableItemBackground"4、CoordinatorLayout、CollapsingToolbarLayout、TabLayout
(GIFが大きすぎて、サイズを圧縮してから、ちょっと問題があります)
CoordinatorLayoutは、サブview間のタッチイベントのレイアウトを別のレベルから制御し、CoordinatorLayoutのレイアウトでToolbarを使用して、外観とレイアウトの残りの部分をより自由にカスタマイズすることができます.AppBarLayoutを使用すると、TabLayoutのタブなどの他のViewとtoolbarがScrollingViewBehaviorとマークされたViewのスクロールイベントに応答できます.CollapsingToolbarLayout、伸縮可能な折りたたみToolbar、AppBarLayoutにToolbarを直接追加するとenterAlwaysCollapsedとexitUntilCollapsedscrollフラグを使用できますが、collapsingの詳細に異なる要素がどのように応答するかは制御できません.ここではCollapsingToolbarLayoutのapp:layout_を使用していますcollapseMode="pin"は、toolbarがviewで折り畳まれたときも画面の上部に固定されていることを確認します.Collapsingtoolbarrayoutとtoolbarを一緒に使用すると、titleは展開時に自動的に大きくなり、折り畳まれたときにフォントをデフォルト値に移行します.TabLayoutは、固定されたタブ(Viewの幅の平均配分)と、スクロール可能なタブ(Viewの幅が固定されず横スクロール可能)を実現しています.ViewPagerを使用してtab間を横断的に切り替える場合は、PagerAdapterのgetPageTitle()から直接タブを作成し、setupWithViewPager()を使用して両方を関連付けることができます.これにより、tabの選択イベントがViewPagerを更新し、同時にViewPagerのページがtabの選択状態を更新できるようになります.注意:図中のActivityの起動効果アニメーションは、次のコードで実現されます.
ActivityOptionsCompat options =
ActivityOptionsCompat.makeSceneTransitionAnimation(context,
view.findViewById(R.id.ivBook),context.getString(R.string.transition_book_img));
ActivityCompat.startActivity(context, intent, options.toBundle());使用前にDesignを追加したパッケージを使用すると、この3つを使用できます.activity_appbar_detail.xmlマスターレイアウトコード:
"1.0" encoding="utf-8"?>
.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
"@+id/ivImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:transitionName="@string/transition_book_img"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
.support.design.widget.CollapsingToolbarLayout>
.support.design.widget.AppBarLayout>
"match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed"
style="@style/MyCustomTabLayout"
/>
.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
.support.design.widget.CoordinatorLayout> RecyclerDetailActivity.classコード:
public class RecyclerDetailActivity extends AppCompatActivity {
private ViewPager mViewPager;
private RecyclerBean mBook;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_appbar_detail);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
onBackPressed();
}
});
mBook = (RecyclerBean) getIntent().getSerializableExtra("book");
CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle(mBook.getTitle());
ImageView ivImage = (ImageView) findViewById(R.id.ivImage);
ivImage.setBackgroundResource(mBook.getImglarge());
mViewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(mViewPager);
TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
tabLayout.addTab(tabLayout.newTab().setText(" "));
tabLayout.addTab(tabLayout.newTab().setText(" "));
tabLayout.addTab(tabLayout.newTab().setText(" "));
tabLayout.setupWithViewPager(mViewPager);
}
private void setupViewPager(ViewPager mViewPager) {
MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
adapter.addFragment(DetailFragment.newInstance(mBook.getSummary()), " ");
adapter.addFragment(DetailFragment.newInstance(mBook.getAuthor_intro()), " ");
adapter.addFragment(DetailFragment.newInstance(mBook.getCatalog()), " ");
mViewPager.setAdapter(adapter);
}
static class MyPagerAdapter extends FragmentPagerAdapter {
private final List mFragments = new ArrayList<>();
private final List mFragmentTitles = new ArrayList<>();
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
public void addFragment(Fragment fragment, String title) {
mFragments.add(fragment);
mFragmentTitles.add(title);
}
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
@Override
public int getCount() {
return mFragments.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mFragmentTitles.get(position);
}
}
} 5、TextInputLayout
TextInputLayoutコントロールはLinearLayoutのように表現され、コンテナです.TextInputLayoutにはサブエレメントが1つしか入れられません.ScrolViewと少し似ています.サブエレメントはEditTextでなければなりません.TextInputLayoutが実現する機能は、EditTextに最初のアルファベットを入力してhintを隠すと、TextInputLayoutに浮かぶラベルが表示され、クールなmaterialアニメーションレイアウトコードを担当することです.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/include_toolbar" />
<android.support.design.widget.TextInputLayout
android:id="@+id/textInputEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">
<EditText
android:id="@+id/edit_text_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/hint_username"
android:inputType="textEmailAddress" />
android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/edit_text_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/hint_password"
android:inputType="textEmailAddress" />
android.support.design.widget.TextInputLayout>
<Button
android:id="@+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_login" />
LinearLayout>6、FloatingActionButton、Snackbar
レイアウトコード:.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/coordinatorLayout"
tools:context="com.aswifter.material.BlankFragment">
"match_parent"
android:layout_height="match_parent"
android:gravity="center"
>
.support.design.widget.FloatingActionButton
android:id="@+id/flb_black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_marginRight="20dp"
android:src="@drawable/ic_favorite"
android:layout_alignParentBottom="true"
app:fabSize="mini"
app:layout_anchor="@id/coordinatorLayout"
app:layout_anchorGravity="bottom|right|end"
app:borderWidth = "0dp"
/>
.support.design.widget.CoordinatorLayout>Fragmentのコード:
public class BlankFragment extends Fragment {
private View view;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
view = inflater.inflate(R.layout.fragment_blank, container, false);
final CoordinatorLayout coordinatorLayout = (CoordinatorLayout) view.findViewById(R.id.coordinatorLayout);
FloatingActionButton floatingActionButton = (FloatingActionButton) view.findViewById(R.id.flb_black);
floatingActionButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(coordinatorLayout,
"Snackbar", Snackbar.LENGTH_LONG)
.setAction("OK", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(
getActivity(),
"snackbar OK clicked",
Toast.LENGTH_LONG).show();
}
})
.show();
}
});
return view;
}
}