shihyingru
5/4/2017 - 8:41 AM

0504 **build.gradle：compile 'com.android.support:design:22.2.0' (http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html) #Na

**build.gradle：compile 'com.android.support:design:22.2.0' (http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html)

#NavigationView [Design Support Library(1)] #Floating Labels for EditText [DesignSupportLibrary 2] #Floating Action Buttons(FAB) [DesignSupportLibrary 3] Snackbar [DesignSupportLibrary 4]

NavigationView.md
content_copyfile_download
  • Rendered
  • Source

NavigationView [Design Support Library(1)]

http://blog.csdn.net/lmj623565791/article/details/46405409)

XML佈局

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    android:id="@+id/id_drawer_layout"
    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"
    >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            android:id="@+id/id_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
        <TextView
            android:id="@+id/id_tv_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="HelloWorld"
            android:textSize="30sp"/>
    </RelativeLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/id_nv_menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/header_just_username"  //header
        app:menu="@menu/menu_drawer"                     //menuitem
        />
</android.support.v4.widget.DrawerLayout>

####header & menuitem
header:自行客製化 / menuitem:可設置主項目和其他次項目list

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
        <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_dashboard"
            android:title="Home"/>
        <item
            android:id="@+id/nav_messages"
            android:icon="@drawable/ic_event"
            android:title="Messages"/>
        <item
            android:id="@+id/nav_friends"
            android:icon="@drawable/ic_headset"
            android:title="Friends"/>
        <item
            android:id="@+id/nav_discussion"
            android:icon="@drawable/ic_forum"
            android:title="Discussion"/>
    </group>
    
    <item android:title="Sub items">
        <menu>
            <item
                android:icon="@drawable/ic_dashboard"
                android:title="Sub item 1"/>
            <item
                android:icon="@drawable/ic_forum"
                android:title="Sub item 2"/>
        </menu>
    </item>
</menu>

####Activtity

public class NavigationViewActivity extends ActionBarActivity
{
  private DrawerLayout mDrawerLayout;
  private NavigationView mNavigationView;
  
   @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_navigation_view);
        
        mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawer_layout);
        mNavigationView = (NavigationView) findViewById(R.id.id_nv_menu);
        
    Toolbar toolbar = (Toolbar) findViewById(R.id.id_toolbar);
    setSupportActionBar(toolbar);
    
    final ActionBar ab = getSupportActionBar();
    ab.setHomeAsUpIndicator(R.drawable.ic_menu);
    ab.setDisplayHomeAsUpEnabled(true);
    
    setupDrawerContent(mNavigationView);
    
}
private void setupDrawerContent(NavigationView navigationView)
{
    navigationView.setNavigationItemSelectedListener(
    
            new NavigationView.OnNavigationItemSelectedListener()
            {
            
                @Override
                public boolean onNavigationItemSelected(MenuItem menuItem)
                {
                    menuItem.setChecked(true);
                    mDrawerLayout.closeDrawers();
                    return true;
                }
            });
}
@Override
public boolean onCreateOptionsMenu(Menu menu)
{
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_navigation_view, menu);
    return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item)
{
    if(item.getItemId() == android.R.id.home)
    {
        mDrawerLayout.openDrawer(GravityCompat.START);
        return true ;
    }
    return super.onOptionsItemSelected(item);
}
}


####Sub Item支持Cheable(次項目list無法應付點擊事件)
更改menu.xml
将android:checkableBehavior="single"去掉，然后给每个item项添加android:checkable="true".

####自定義客製化navigationView
可將下面的menu改成recyclerview(包含headerview和不同的bodyView)

FloatingLabelsforEditText.md
content_copyfile_download
  • Rendered
  • Source

Floating Labels for EditText [DesignSupportLibrary 2]

(http://www.androidhive.info/2015/09/android-material-design-floating-labels-for-edittext/)

TextInputLayout XML

<android.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.support.design.widget.AppBarLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

      <android.support.v7.widget.Toolbar
          android:id="@+id/toolbar"
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize"
          android:background="?attr/colorPrimary"
          app:layout_scrollFlags="scroll|enterAlways"
          app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
  </android.support.design.widget.AppBarLayout>

  <LinearLayout
      android:layout_width="fill_parent"
      android:layout_height="match_parent"
      android:layout_marginTop="?attr/actionBarSize"
      android:orientation="vertical"
      android:paddingLeft="20dp"
      android:paddingRight="20dp"
      android:paddingTop="60dp">

      <android.support.design.widget.TextInputLayout
          android:id="@+id/input_layout_name"
          android:layout_width="match_parent"
          android:layout_height="wrap_content">

          <EditText
              android:id="@+id/input_name"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:singleLine="true"
              android:hint="@string/hint_name" />
      </android.support.design.widget.TextInputLayout>

      <android.support.design.widget.TextInputLayout
          android:id="@+id/input_layout_email"
          android:layout_width="match_parent"
          android:layout_height="wrap_content">

          <EditText
              android:id="@+id/input_email"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:inputType="textEmailAddress"
              android:hint="@string/hint_email" />
      </android.support.design.widget.TextInputLayout>

      <android.support.design.widget.TextInputLayout
          android:id="@+id/input_layout_password"
          android:layout_width="match_parent"
          android:layout_height="wrap_content">

          <EditText
              android:id="@+id/input_password"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:inputType="textPassword"
              android:hint="@string/hint_password" />
      </android.support.design.widget.TextInputLayout>

      <Button android:id="@+id/btn_signup"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:text="@string/btn_sign_up"
          android:background="@color/colorPrimary"
          android:layout_marginTop="40dp"
          android:textColor="@android:color/white"/>

  </LinearLayout>

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


Activity

setErrorEnabled() and setError() methods is called on to edit text to display the error message when the input is invalid or empty.

public class MainActivity extends AppCompatActivity {

  private Toolbar toolbar;
  private EditText inputName, inputEmail, inputPassword;
  private TextInputLayout inputLayoutName, inputLayoutEmail, inputLayoutPassword;
  private Button btnSignUp;

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

      toolbar = (Toolbar) findViewById(R.id.toolbar);
      setSupportActionBar(toolbar);

      inputLayoutName = (TextInputLayout) findViewById(R.id.input_layout_name);
      inputLayoutEmail = (TextInputLayout) findViewById(R.id.input_layout_email);
      inputLayoutPassword = (TextInputLayout) findViewById(R.id.input_layout_password);
      inputName = (EditText) findViewById(R.id.input_name);
      inputEmail = (EditText) findViewById(R.id.input_email);
      inputPassword = (EditText) findViewById(R.id.input_password);
      btnSignUp = (Button) findViewById(R.id.btn_signup);

      inputName.addTextChangedListener(new MyTextWatcher(inputName));
      inputEmail.addTextChangedListener(new MyTextWatcher(inputEmail));
      inputPassword.addTextChangedListener(new MyTextWatcher(inputPassword));

      btnSignUp.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View view) {
              submitForm();//驗證使用者是否有輸入資料(要做資料防呆?!)
          }
      });
  }

  /**
   * Validating form
   */
  private void submitForm() {
      if (!validateName()) {
          return;
      }

      if (!validateEmail()) {
          return;
      }

      if (!validatePassword()) {
          return;
      }

      Toast.makeText(getApplicationContext(), "Thank You!", Toast.LENGTH_SHORT).show();
  }

  private boolean validateName() {
      if (inputName.getText().toString().trim().isEmpty()) {
          inputLayoutName.setError(getString(R.string.err_msg_name));
          requestFocus(inputName);
          return false;
      } else {
          inputLayoutName.setErrorEnabled(false);
      }

      return true;
  }

  private boolean validateEmail() {
      String email = inputEmail.getText().toString().trim();

      if (email.isEmpty() || !isValidEmail(email)) {
          inputLayoutEmail.setError(getString(R.string.err_msg_email));
          requestFocus(inputEmail);
          return false;
      } else {
          inputLayoutEmail.setErrorEnabled(false);
      }

      return true;
  }

  private boolean validatePassword() {
      if (inputPassword.getText().toString().trim().isEmpty()) {
          inputLayoutPassword.setError(getString(R.string.err_msg_password));
          requestFocus(inputPassword);
          return false;
      } else {
          inputLayoutPassword.setErrorEnabled(false);
      }

      return true;
  }

  private static boolean isValidEmail(String email) {
      return !TextUtils.isEmpty(email) && android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches();
  }

  private void requestFocus(View view) {
      if (view.requestFocus()) {
          getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_VISIBLE);
      }
  }

  private class MyTextWatcher implements TextWatcher {

      private View view;

      private MyTextWatcher(View view) {
          this.view = view;
      }

      public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
      }

      public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
      }

      public void afterTextChanged(Editable editable) {
          switch (view.getId()) {
              case R.id.input_name:
                  validateName();
                  break;
              case R.id.input_email:
                  validateEmail();
                  break;
              case R.id.input_password:
                  validatePassword();
                  break;
          }
      }
  }

}

點擊螢幕空白區域隱藏打字鍵盤

InputMethodManager m = (InputMethodManager) getApplication().getSystemService(Context.INPUT_METHOD_SERVICE); m.hideSoftInputFromWindow(getWindow().getCurrentFocus().getWindowToken(), 0);

FloatingActionButtons(FAB).md
content_copyfile_download
  • Rendered
  • Source

Floating Action Buttons(FAB) [DesignSupportLibrary 3]

按鈕操作設定
(http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0718/3197.html)
按鈕樣式設定
(http://blog.csdn.net/lmj623565791/article/details/46678867)

XML

app:backgroundTint="#ff87ffeb" || app:rippleColor="#33728dff" (改變按鈕背景顏色 || 按鈕點擊時的漣漪變化顏色)
app:borderWidth="0dp" (5.x版本看不見陰影,要配合app:borderWidth="0dp" 設置和理的margin,才不會有奇怪的矩形邊界。)

<android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right|bottom" android:src="@drawable/ic_discuss" app:backgroundTint="#ff87ffeb" app:rippleColor="#33728dff" app:elevation="6dp" app:borderWidth="0dp" app:fabSize="normal" //按鈕大小(normal or mini) app:pressedTranslationZ="12dp" />

正式XML配置

CoordinatorLayout幫助我們協調包含的子物件之間的互動,可以讓一個元素浮動在另一個元素之上。
按鈕應該處於螢幕的右下角,建議在手機上下方的MARGIN設置為16dp,平板上設置為24dp。

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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">
 
          <ListView
              android:id="@+id/lvToDoList"
              android:layout_width="match_parent"
              android:layout_height="match_parent"></ListView>
 
          <android.support.design.widget.FloatingActionButton
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_gravity="bottom|right"
              android:layout_margin="16dp"
              android:src="@drawable/ic_done"
              app:layout_anchor="@id/lvToDoList"
              app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>

Snackbar[DesignSupportLibrary 4]

基礎使用方式 (http://givemepass.blogspot.tw/2015/11/snackbarcoordinatorlayout.html)
很棒的snackBar模組化 (http://www.jianshu.com/p/cd1e80e64311)

XML

snackbar和floatingButton一起包在coordinatorLayout內,透過coordinatorLayout,可以讓snackBar出現時,使floatingButton往上滑動。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
  android:id="@+id/coordinatorLayout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  android:paddingBottom="@dimen/activity_vertical_margin"
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  xmlns:app="http://schemas.android.com/apk/res-auto">
  
  <RelativeLayout
      android:id="@+id/mainrelativeLayout"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
      
      <ToggleButton
          android:id="@+id/toggle"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" />
          
  </RelativeLayout>
  
  <android.support.design.widget.FloatingActionButton
      android:id="@+id/fab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginBottom="20dp"
      android:layout_marginRight="20dp"
      android:src="@drawable/abc_btn_rating_star_on_mtrl_alpha"
      app:fabSize="normal"
      app:layout_anchor="@id/mainrelativeLayout"
      app:layout_anchorGravity="bottom|right|end" />

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

Activity

//SnackBar [DesignSupportLibrary 4]
      //togglebutton點擊事件
      toggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
          @Override
          public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
              if (snackbar == null) {
                  snackbar = Snackbar
                          .make(coordinatorLayout, "Click ToggleButton", Snackbar.LENGTH_LONG)
                          .setAction("Undo", new View.OnClickListener() {
                              @Override
                              public void onClick(View v) {
                                  toggleButton.toggle();
                              }
                          });
              }
              
              if (isChecked) {
              
                  //設置snackbar字體顏色
                  snackbar.setActionTextColor(Color.parseColor("#F44336"));
                  
                  //得到Snackbar的view
                  View snackbarView = snackbar.getView();
                  //設置snackbar背景顏色
                  snackbarView.setBackgroundColor(Color.parseColor("#90CAF9"));
                  
                  //得到Snackbar的message元件，修改字體颜色
                  TextView textView = (TextView) snackbarView.findViewById(android.support.design.R.id.snackbar_text);
                  textView.setTextColor(Color.parseColor("#0D47A1"));
                  
                  //使用snackbar library
                  /*SnackbarUtil.setSnackbarColor(snackbar, SnackbarUtil.blue);
                  SnackbarUtil.SnackbarAddView(snackbar, R.layout.snackbar_addview, 0);*/
                  
                  //顯示snackbar
                  snackbar.show();
              } else if (snackbar.isShown()) { //if snackbar已經顯示,取消顯示狀態
                  snackbar.dismiss();
                  snackbar = null;
              }
              
          }
      });