源码
包括cardView, tabLayout, navigationView, recyclerView, inputLayout, dialogFragment, bottomBar.
Bottom navigation demo 单纯底部的导航条。How to build android material design bottom navigation (part 1)
We need to add Material Design Support Library and Bottom Navigation library so we can ust it, so open build.gradle file and add the following code:
1 2 3 4 5 6 7 dependencies { compile fileTree (dir: 'libs' , include : ['*.jar' ]) testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:23.4.0' compile 'com.android.support:design:23.2.1' compile 'com.roughike:bottom-bar:1.2.1' }
com.sally.servicedemo.design/ FiveButtonsActivity.class, five_buttons_activity.mxl, res/menu/five_buttons_menu.mxl, res/values/colors.xml
we can customize the bottomBar icons color, theme, fonts and so on. through this method:
1 2 3 4 5 6 7 8 9 10 11 // set the color for the active tab.mBottomBar.setActiveTabColor("#aaaaaa" ); // use the dark theme.mBottomBar.useDarkTheme(true ); // use custom text appearance in tab titlesmBottomBar.setTextAppearance(R.style .MyText); // use custom typeface thats located at the '/src/main/assets' directory . if using with custom text appearance, set the text appearance first mBottomBar.setTypeFace("MyFont.ttf" );
demo2 Bottom Navigation控制Fragment。How to build android material design bottom navigation (part 2)
Flat buttons:0dp
Raised buttons:2dp
Floating action button
Persistent footer buttons
Dropdown buttons : generic overflow dropdown button, segmented dropdown button, editable segmented dropdown button
Toggle buttons
usage Useflat buttons
in dialogs; Useraised buttons
or flat buttons (depending on your layout) for inline buttons; If your app requires actions to be persistent and readily available to the user, consider using thefloating action button
orpersistent footer buttons
.
component & 源码 源码
包括cardView, tabLayout, navigationView, recyclerView, inputLayout, dialogFragment, bottomBar.
cardView
tabLayout
viewPager.setAdapter(adapeter); tabLayout.setTabMode(TabLayout.MODE_FIXED | TabLayout.MODE_SCROLLABLE); // 导航条是否可以滚动 tabLayout.setupWithViewPager(mViewPager); // tabLayout与viewPager关联 tabLayout.setTabsFromPagerAdapter(adapter); // tabLayout设置adapter,与viewPager是同一个适配器,适配去需要重写getPageTitle()
方法,不然导航条没标题😂
1 2 3 4 5 6 <android .support .design .widget .Navigation ... android :layout_gravity="left" android:fitsSystemWindows="true" app:headerLayout="@layout/header_layout" app:menu="@layout/menu_navigation" />
这里就很神奇了
这个部分AppBarLayout可以跟随RecyclerView的滑动显示或隐藏,但是根布局需要使用android.support.design.widget.CoordinatorLayout
textInputLayout & dialogFragment
提示效果美美哒输入框
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 mTextInputLayout.setHint("hint ..... " ); mEditText = mTextInputLayout.getEditText(); mEditText.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) { if (s.length() > 8 || s.length() < 6 ) { mTextInputLayout.setErrorEnabled(true ); mTextInputLayout.setError("请将长度保持再6-8之间" ); } else { mTextInputLayout.setErrorEnabled(false ); } } @Override public void afterTextChanged (Editable s) { } });
可以通过继承DialogFragment创建对话框,很简单,加载一个布局就行了
1 2 3 4 5 6 7 8 9 public class DialogFragment1 extends DialogFragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R .layout.dialog_fragment1, container, false ); return view; } }
也可以定制能交互的dialog
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 @NonNull @Override public Dialog onCreateDialog (Bundle savedInstanceState) { final View view = getActivity().getLayoutInflater().inflate(R.layout.dialog_fragment2, null ); mEtName = (EditText) view.findViewById(R.id.id_dialog_et_name); mEtPassword = (EditText) view.findViewById(R.id.id_dialog_et_password); AlertDialog.Builder builder = new AlertDialog.Builder(getActivity()); builder.setView(view) .setNegativeButton("CANCEL" , null ) .setPositiveButton("LOGIN" , new DialogInterface.OnClickListener() { @Override public void onClick (DialogInterface dialog, int which) { LoginListener listener = (LoginListener) getActivity(); listener.onLoginInputCompare(mEtName.getText().toString(), mEtPassword.getText().toString()); } }); return builder.create () ; } public interface LoginListener { void onLoginInputCompare (String userName, String password) ; }