2017年1月10日火曜日

v7 Preference Support Library を Material Design にする

フレームワーク

v7 Preference Support Library
view plainprint?
  1. com.android.support:preference-v7:25.1.0  


v14 Preference Support Library
view plainprint?
  1. com.android.support:preference-v14:25.1.0  


v7 Preference Support Library 例

view plainprint?
  1. public class SettingsActivity extends AppCompatActivity {  
  2.   
  3.     @Override  
  4.     protected void onCreate(Bundle savedInstanceState) {  
  5.         super.onCreate(savedInstanceState);  
  6.   
  7.         getSupportFragmentManager().beginTransaction()  
  8.                 .replace(android.R.id.content, new SettingsFragment())  
  9.                 .commit();  
  10.     }  
  11.   
  12.     public static class SettingsFragment extends PreferenceFragmentCompat {  
  13.   
  14.         @Override  
  15.         public void onCreatePreferences(Bundle savedInstanceState, String rootKey) {  
  16.             setPreferencesFromResource(R.xml.pref, rootKey);  
  17.         }  
  18.     }  
  19. }  

Material Design 化 例

view plainprint?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.   
  4.     <style name="Theme.Setting">  
  5.         <item name="android:listSeparatorTextViewStyle">@style/Preference.ListSeparator</item>  
  6.         <item name="preferenceTheme">@style/PreferenceThemeOverlay</item>  
  7.     </style>  
  8.   
  9.     <style name="Preference.ListSeparator" parent="android:Widget.TextView">  
  10.         <item name="android:minHeight">48dp</item>  
  11.         <item name="android:gravity">center_vertical</item>  
  12.         <item name="android:textAppearance">@style/TextAppearance.AppCompat.Body2</item>  
  13.         <item name="android:textColor">?colorAccent</item>  
  14.         <item name="android:maxLines">1</item>  
  15.         <item name="android:paddingLeft">16dp</item>  
  16.         <item name="android:paddingRight">16dp</item>  
  17.     </style>  
  18.   
  19. </resources>  
values/styles_preference.xml
view plainprint?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.   
  4.     <style name="Preference">  
  5.         <item name="android:layout">@layout/preference_material</item>  
  6.     </style>  
  7.   
  8.     <style name="Preference.DropDown">  
  9.         <item name="android:layout">@layout/preference_dropdown_material</item>  
  10.     </style>  
  11.   
  12.     <style name="Preference.SeekBarPreference">  
  13.         <item name="android:layout">@layout/preference_widget_seekbar_material</item>  
  14.         <item name="adjustable">true</item>  
  15.         <item name="showSeekBarValue">true</item>  
  16.     </style>  
  17.   
  18.     <style name="PreferenceFragmentList">  
  19.         <item name="android:paddingLeft">0dp</item>  
  20.         <item name="android:paddingRight">0dp</item>  
  21.     </style>  
  22.   
  23. </resources>  
values-v17/styles_preference.xml
view plainprint?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.   
  4.     <style name="PreferenceFragmentList">  
  5.         <item name="android:paddingStart">0dp</item>  
  6.         <item name="android:paddingEnd">0dp</item>  
  7.     </style>  
  8.   
  9. </resources>  
layout/preference_material.xml
view plainprint?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout  
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     xmlns:tools="http://schemas.android.com/tools"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="wrap_content"  
  7.     android:background="?android:attr/selectableItemBackground"  
  8.     android:baselineAligned="false"  
  9.     android:focusable="true"  
  10.     android:gravity="center_vertical"  
  11.     android:minHeight="72dp"  
  12.     android:paddingLeft="8dp"  
  13.     android:paddingRight="8dp">  
  14.   
  15.     <FrameLayout  
  16.         android:id="@+id/icon_frame"  
  17.         android:layout_width="56dp"  
  18.         android:layout_height="wrap_content">  
  19.   
  20.         <android.support.v7.internal.widget.PreferenceImageView  
  21.             android:id="@android:id/icon"  
  22.             android:layout_width="40dp"  
  23.             android:layout_height="40dp"  
  24.             android:layout_gravity="center_horizontal"/>  
  25.   
  26.     </FrameLayout>  
  27.   
  28.     <LinearLayout  
  29.         android:layout_width="0dp"  
  30.         android:layout_height="wrap_content"  
  31.         android:layout_marginLeft="8dp"  
  32.         android:layout_marginRight="8dp"  
  33.         android:layout_weight="1"  
  34.         android:orientation="vertical"  
  35.         android:paddingBottom="20dp"  
  36.         android:paddingTop="20dp">  
  37.   
  38.         <TextView  
  39.             android:id="@android:id/title"  
  40.             android:layout_width="wrap_content"  
  41.             android:layout_height="wrap_content"  
  42.             android:ellipsize="marquee"  
  43.             android:fadingEdge="horizontal"  
  44.             android:maxLines="1"  
  45.             android:textAppearance="@style/TextAppearance.AppCompat.Subhead"  
  46.             android:textColor="?android:attr/textColorPrimary"  
  47.             tools:text="title"/>  
  48.   
  49.         <TextView  
  50.             android:id="@android:id/summary"  
  51.             android:layout_width="wrap_content"  
  52.             android:layout_height="wrap_content"  
  53.             android:layout_marginTop="2dp"  
  54.             android:maxLines="4"  
  55.             android:textAppearance="@style/TextAppearance.AppCompat.Body1"  
  56.             android:textColor="?android:attr/textColorSecondary"  
  57.             tools:text="summary"/>  
  58.   
  59.     </LinearLayout>  
  60.   
  61.     <!-- Preference should place its actual preference widget here. -->  
  62.     <LinearLayout  
  63.         android:id="@android:id/widget_frame"  
  64.         android:layout_width="wrap_content"  
  65.         android:layout_height="match_parent"  
  66.         android:layout_marginLeft="8dp"  
  67.         android:layout_marginRight="8dp"  
  68.         android:gravity="center_vertical"  
  69.         android:orientation="vertical"/>  
  70.   
  71. </LinearLayout>  
layout/preference_dropdown_material.xml
view plainprint?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout  
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     xmlns:tools="http://schemas.android.com/tools"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="wrap_content"  
  7.     android:background="?android:attr/selectableItemBackground"  
  8.     android:focusable="true"  
  9.     android:gravity="center_vertical"  
  10.     android:minHeight="72dp"  
  11.     android:paddingLeft="8dp"  
  12.     android:paddingRight="8dp">  
  13.   
  14.     <Spinner  
  15.         android:id="@+id/spinner"  
  16.         android:layout_width="0dp"  
  17.         android:layout_height="wrap_content"  
  18.         android:visibility="invisible"/>  
  19.   
  20.     <FrameLayout  
  21.         android:id="@+id/icon_frame"  
  22.         android:layout_width="56dp"  
  23.         android:layout_height="wrap_content">  
  24.   
  25.         <android.support.v7.internal.widget.PreferenceImageView  
  26.             android:id="@android:id/icon"  
  27.             android:layout_width="40dp"  
  28.             android:layout_height="40dp"  
  29.             android:layout_gravity="center_horizontal"/>  
  30.   
  31.     </FrameLayout>  
  32.   
  33.     <LinearLayout  
  34.         android:layout_width="0dp"  
  35.         android:layout_height="wrap_content"  
  36.         android:layout_marginLeft="8dp"  
  37.         android:layout_marginRight="8dp"  
  38.         android:layout_weight="1"  
  39.         android:orientation="vertical"  
  40.         android:paddingBottom="20dp"  
  41.         android:paddingTop="20dp">  
  42.   
  43.         <TextView  
  44.             android:id="@android:id/title"  
  45.             android:layout_width="wrap_content"  
  46.             android:layout_height="wrap_content"  
  47.             android:ellipsize="marquee"  
  48.             android:fadingEdge="horizontal"  
  49.             android:maxLines="1"  
  50.             android:textAppearance="@style/TextAppearance.AppCompat.Subhead"  
  51.             android:textColor="?android:attr/textColorPrimary"  
  52.             tools:text="title"/>  
  53.   
  54.         <TextView  
  55.             android:id="@android:id/summary"  
  56.             android:layout_width="wrap_content"  
  57.             android:layout_height="wrap_content"  
  58.             android:layout_marginTop="2dp"  
  59.             android:maxLines="4"  
  60.             android:textAppearance="@style/TextAppearance.AppCompat.Body1"  
  61.             android:textColor="?android:attr/textColorSecondary"  
  62.             tools:text="summary"/>  
  63.   
  64.     </LinearLayout>  
  65.   
  66.     <!-- Preference should place its actual preference widget here. -->  
  67.     <LinearLayout  
  68.         android:id="@android:id/widget_frame"  
  69.         android:layout_width="wrap_content"  
  70.         android:layout_height="match_parent"  
  71.         android:layout_marginLeft="8dp"  
  72.         android:layout_marginRight="8dp"  
  73.         android:gravity="center_vertical"  
  74.         android:orientation="vertical"/>  
  75.   
  76. </LinearLayout>  
layout/preference_widget_seekbar_material.xml
view plainprint?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!-- Layout used by SeekBarPreference for the seekbar widget style. -->  
  3. <LinearLayout  
  4.     xmlns:android="http://schemas.android.com/apk/res/android"  
  5.     xmlns:tools="http://schemas.android.com/tools"  
  6.     android:layout_width="match_parent"  
  7.     android:layout_height="wrap_content"  
  8.     android:clipChildren="false"  
  9.     android:clipToPadding="false"  
  10.     android:gravity="center_vertical"  
  11.     android:minHeight="72dp"  
  12.     android:paddingLeft="8dp"  
  13.     android:paddingRight="8dp">  
  14.   
  15.     <ImageView  
  16.         android:id="@+android:id/icon"  
  17.         android:layout_width="wrap_content"  
  18.         android:layout_height="wrap_content"  
  19.         android:layout_gravity="center"  
  20.         android:minWidth="@dimen/preference_icon_minWidth"/>  
  21.   
  22.     <RelativeLayout  
  23.         android:layout_width="0dp"  
  24.         android:layout_height="wrap_content"  
  25.         android:layout_marginLeft="8dp"  
  26.         android:layout_marginRight="8dp"  
  27.         android:layout_weight="1"  
  28.         android:clipChildren="false"  
  29.         android:clipToPadding="false"  
  30.         android:paddingBottom="20dp"  
  31.         android:paddingTop="20dp">  
  32.   
  33.         <TextView  
  34.             android:id="@+android:id/title"  
  35.             android:layout_width="wrap_content"  
  36.             android:layout_height="wrap_content"  
  37.             android:ellipsize="marquee"  
  38.             android:fadingEdge="horizontal"  
  39.             android:maxLines="1"  
  40.             android:textAppearance="@style/TextAppearance.AppCompat.Subhead"  
  41.             android:textColor="?android:attr/textColorPrimary"  
  42.             tools:text="title"/>  
  43.   
  44.         <TextView  
  45.             android:id="@android:id/summary"  
  46.             android:layout_width="wrap_content"  
  47.             android:layout_height="wrap_content"  
  48.             android:layout_alignLeft="@android:id/title"  
  49.             android:layout_alignStart="@android:id/title"  
  50.             android:layout_below="@android:id/title"  
  51.             android:layout_marginTop="2dp"  
  52.             android:maxLines="4"  
  53.             android:textAppearance="@style/TextAppearance.AppCompat.Body1"  
  54.             android:textColor="?android:attr/textColorSecondary"  
  55.             tools:text="summary"/>  
  56.   
  57.         <!-- Using UnPressableLinearLayout as a workaround to disable the pressed state propagation  
  58.         to the children of this container layout. Otherwise, the animated pressed state will also  
  59.         play for the thumb in the AbsSeekBar in addition to the preference's ripple background.  
  60.         The background of the SeekBar is also set to null to disable the ripple background -->  
  61.         <android.support.v7.preference.UnPressableLinearLayout  
  62.             android:layout_width="match_parent"  
  63.             android:layout_height="wrap_content"  
  64.             android:layout_alignLeft="@android:id/title"  
  65.             android:layout_alignStart="@android:id/title"  
  66.             android:layout_below="@android:id/summary"  
  67.             android:layout_marginTop="2dp"  
  68.             android:clipChildren="false"  
  69.             android:clipToPadding="false">  
  70.   
  71.             <SeekBar  
  72.                 android:id="@+id/seekbar"  
  73.                 android:layout_width="0dp"  
  74.                 android:layout_height="wrap_content"  
  75.                 android:layout_weight="1"  
  76.                 android:background="@null"  
  77.                 android:clickable="false"  
  78.                 android:focusable="false"  
  79.                 android:paddingEnd="@dimen/preference_seekbar_padding_end"  
  80.                 android:paddingLeft="@dimen/preference_seekbar_padding_start"  
  81.                 android:paddingRight="@dimen/preference_seekbar_padding_end"  
  82.                 android:paddingStart="@dimen/preference_seekbar_padding_start"/>  
  83.   
  84.             <TextView  
  85.                 android:id="@+id/seekbar_value"  
  86.                 android:layout_width="@dimen/preference_seekbar_value_width"  
  87.                 android:layout_height="match_parent"  
  88.                 android:ellipsize="marquee"  
  89.                 android:fadingEdge="horizontal"  
  90.                 android:fontFamily="sans-serif-condensed"  
  91.                 android:gravity="center"  
  92.                 android:maxLines="1"  
  93.                 android:textAppearance="@style/TextAppearance.AppCompat.Subhead"/>  
  94.   
  95.         </android.support.v7.preference.UnPressableLinearLayout>  
  96.   
  97.     </RelativeLayout>  
  98.   
  99. </LinearLayout>  
投稿者 時刻: 0 件のコメント:
ラベル:
登録: 投稿 (Atom)