คำถามติดแท็ก material-design

ตอนนี้ฉันกำลังอยู่ระหว่างการเรียนรู้วิธีแปลงแอปเป็นดีไซน์ Material และตอนนี้ฉันติดขัดเล็กน้อย ฉันได้เพิ่มแถบเครื่องมือแล้วและฉันได้ทำให้ลิ้นชักการนำทางของฉันซ้อนทับเนื้อหาทั้งหมด ตอนนี้ฉันกำลังพยายามสร้างการค้นหาที่ขยายได้ซึ่งดูเหมือนในหลักเกณฑ์ของวัสดุ : นี่คือสิ่งที่ฉันมีในตอนนี้และฉันไม่สามารถหาวิธีทำให้มันเป็นเหมือนข้างต้น: นี่คือ xml เมนูของฉัน: <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/action_search" android:icon="@android:drawable/ic_menu_search" android:title="Search" app:showAsAction="always" app:actionViewClass="android.support.v7.widget.SearchView" /> </menu> ได้ผลฉันได้รับรายการเมนูที่ขยายไปยัง SearchView และฉันสามารถกรองรายการของฉันได้ดี มันดูไม่เหมือนภาพที่ 1 เลย ผมพยายามที่จะใช้MenuItemCompat.setOnActionExpandListener()ในR.id.action_searchดังนั้นฉันสามารถเปลี่ยนไอคอนที่บ้านกับลูกศรย้อนกลับ แต่ที่ดูเหมือนจะไม่ทำงาน ไม่มีอะไรเกิดขึ้นในผู้ฟัง แม้ว่าจะได้ผล แต่ก็ยังไม่ใกล้เคียงกับภาพที่ 1 มากนัก ฉันจะสร้าง SearchView ในแถบเครื่องมือ appcompat ใหม่ที่ดูเหมือนหลักเกณฑ์วัสดุได้อย่างไร

135 android  toolbar  android-appcompat  searchview  material-design 

ฉันต้องการตั้งค่าเอฟเฟกต์ระลอกคลื่นในมุมมองข้อความและมุมมองภาพใน Android Studio ฉันจะทำมันได้อย่างไร?

127 android  android-imageview  textview  material-design 

ฉันมี BttomSheetDialogFragment ที่กำหนดเองและฉันต้องการให้มีมุมกลมที่ด้านบนของมุมมองด้านล่าง นี่คือคลาสกำหนดเองของฉันที่ขยายเลย์เอาต์ของฉันที่ฉันต้องการให้ปรากฏจากด้านล่าง View mView; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { mView = inflater.inflate(R.layout.charge_layout, container, false); initChargeLayoutViews(); return mView; } และฉันมีไฟล์ทรัพยากร xml นี้เป็นพื้นหลัง: <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <corners android:topRightRadius="35dp" android:topLeftRadius="35dp" /> <solid android:color="@color/white"/> <padding android:top="10dp" android:bottom="10dp" android:right="16dp" android:left="16dp"/> แต่ปัญหาคือเมื่อฉันตั้งค่าไฟล์ทรัพยากรนี้เป็นพื้นหลังขององค์ประกอบรูทของ Layout ของฉันมุมจะยังไม่ถูกปัดเศษ และฉันไม่สามารถใช้รหัสด้านล่าง: this.getDialog().getWindow().setBackgroundDrawableResource(R.drawable.charge_layout_background); เพราะมันจะแทนที่พื้นหลังเริ่มต้นของ BottomSheetDialog …

126 android  material-design  bottom-sheet  material-components-android  material-components 

ฉันกำลังเล่นกับสิ่งใหม่android.support.design.widget.TabLayoutและพบปัญหาในการกำหนดคลาสไม่มีวิธีใดในการเปลี่ยนสีตัวบ่งชี้และความสูงเริ่มต้น จากการวิจัยพบว่าสีตัวบ่งชี้เริ่มต้นถูกนำมาจาก AppTheme โดยเฉพาะจากที่นี่: <item name="colorAccent">#FF4081</item> ตอนนี้ในกรณีของฉันถ้าฉันเปลี่ยนcolorAccentมันจะส่งผลต่อมุมมองอื่น ๆ ทั้งหมดที่ใช้ค่านี้เป็นสีพื้นหลังเช่น ProgressBar ตอนนี้มีวิธีใดในการเปลี่ยน indicatorColor เป็นอย่างอื่นนอกเหนือจาก the colorAccent?

124 android  material-design  android-design-library 

My Cardview ภายใน Listview ไม่แสดงเงาใน Android L (Nexus 5) นอกจากนี้ขอบกลมยังแสดงไม่ถูกต้อง นี่คือรหัสสำหรับมุมมองอะแดปเตอร์ของ Listview: <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:card_view="http://schemas.android.com/apk/res-auto" xmlns:app="http://schemas.android.com/apk/res/com.example.myapp" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" android:id="@+id/card_view" android:layout_width="match_parent" android:layout_height="wrap_content" app:cardBackgroundColor="@android:color/white" android:foreground="?android:attr/selectableItemBackground" app:cardCornerRadius="4dp" app:cardElevation="4dp" > <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingTop="@dimen/activity_vertical_margin" > <TextView android:id="@+id/tvName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_marginTop="@dimen/padding_small" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:textAppearance="?android:attr/textAppearanceLarge" /> <ImageView …

123 android  android-listview  android-5.0-lollipop  material-design  android-cardview 

ฉันกำลังเล่นกับMaterial-UIอยู่นิดหน่อย มีตัวเลือกใดบ้างสำหรับการสร้างเค้าโครงกริด (เช่นในBootstrap ) หรือไม่? ถ้าไม่วิธีเพิ่มฟังก์ชันนี้คืออะไร? มีส่วนประกอบ GridListแต่ฉันเดาว่ามันมีจุดประสงค์ที่แตกต่างกัน

118 reactjs  material-design  material-ui  grid-system 

ฉันจะตั้งค่าความสูงของAppBarFlutter ได้อย่างไร? ชื่อของแถบควรอยู่กึ่งกลางในแนวตั้ง (ในนั้นAppBar)

111 dart  material-design  flutter 

พื้นหลัง ฉันได้รับมอบหมายให้สร้าง UI ที่ทำงานคล้ายกับที่ Google Maps แสดงแผ่นงานด้านล่างสำหรับผลลัพธ์ที่พบ มีสามขั้นตอนที่แตกต่างกัน: เนื้อหาด้านล่าง พื้นที่ด้านบนยังคงสัมผัสได้และจะไม่เลื่อนอะไรเลยที่ด้านล่าง เนื้อหาเต็มหน้าจอในขณะที่พื้นที่ด้านบนมีส่วนหัวขนาดใหญ่ เนื้อหาเต็มหน้าจอในขณะที่พื้นที่ด้านบนมีเพียงแถบเครื่องมือ นี่คือสิ่งที่ฉันกำลังพูดถึงบน Google Maps: ปัญหา สิ่งนี้คือแผ่นงานด้านล่างยังไม่ได้เป็นส่วนหนึ่งของไลบรารีการออกแบบ (แม้ว่าจะมีการร้องขอที่นี่ ) ไม่เพียงแค่นั้น แต่ UI นั้นค่อนข้างซับซ้อนและต้องการการจัดการแถบเครื่องมือในหลาย ๆ ขั้นตอน สิ่งที่ฉันพยายาม ฉันพบไลบรารีที่ดี (เพียงพอ) สำหรับแผ่นงานด้านล่าง ( ที่นี่ ) และเพิ่มเนื้อหาลงในตัวอย่างส่วนย่อยเพื่อให้มีมุมมองเดียวกันกับที่แสดงในตัวอย่างการออกแบบวัสดุ (เช่นที่นี่ ) เพื่อให้มี CollapsingToolbarLayout ที่จะดูแล ของเฟส 2 + 3 ในแอพที่ฉันกำลังทำฉันต้องย้ายไอคอนด้วยในขณะที่คุณเลื่อน แต่ฉันคิดว่าถ้าฉันประสบความสำเร็จกับส่วนที่เหลือมันน่าจะง่าย นี่คือรหัส: fragment_my.xml <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout …

110 android  material-design  android-coordinatorlayout  android-design-library  android-collapsingtoolbarlayout 

ฉันต้องการใช้สีแบรนด์ของ บริษัท ของฉันตลอดทั้งแอป ฉันพบปัญหานี้: AngularJS 2 - การออกแบบวัสดุ - ตั้งค่าจานสีที่ฉันสามารถสร้างชุดรูปแบบที่กำหนดเองได้แต่โดยพื้นฐานแล้วจะใช้เพียงส่วนต่างๆของจานสีที่สร้างไว้ล่วงหน้า ฉันไม่ต้องการใช้สีที่กำหนดไว้ล่วงหน้าของ Material2 ฉันต้องการสีของแบรนด์ที่เป็นเอกลักษณ์และพิเศษของฉัน มีวิธีที่ดีกว่าในการสร้างธีมของตัวเอง_palette.scssไหม ฉันจำเป็นต้องทำมิกซ์อินสำหรับแบรนด์ของฉันหรือไม่? ถ้ามี - มีคำแนะนำเกี่ยวกับวิธีการทำอย่างถูกต้องหรือไม่? ความหมายของเฉดสีต่างๆ (มีตัวเลขเช่น 50, 100, 200, A100, A200 ... ) ข้อมูลใด ๆ เกี่ยวกับพื้นที่นี้จะได้รับการชื่นชมมาก!

108 angular  sass  material-design  angular-material2 

ฉันเคยเห็นคำถาม SO และพวกเขาให้วิธีการที่เป็นไปได้เพื่อบรรลุสิ่งที่ฉันต้องการ ตัวอย่างเช่น: ใช้colorControlHighlightแอตทริบิวต์ใน styles.xml นี่คือสไตล์ของฉัน -v21.xml: <style name="SelectableItemBackground"> <item name="android:colorControlHighlight">#5677FC</item> <item name="android:background">?attr/selectableItemBackground</item> </style> และวิดเจ็ตของฉัน: <TextView android:id="@+id/tv_take_photo_as_bt" android:layout_width="280dp" android:layout_height="48dp" android:text="@string/act_take_photo" style="@style/SelectableItemBackground"/> และไม่ได้ผล ฉันยังพยายามเพิ่มparent="Theme.AppCompatในสไตล์ "SelectableItemBackground" หรือเปลี่ยนเป็นcolorControlHighlight(no android: prefix)"หรือเปลี่ยน?android:attr/selectableItemBackgroundเป็นก็ไม่มีประโยชน์ ใช้backgroundTintแอตทริบิวต์ในเค้าโครง ดังนั้นผมจึงเพิ่มของฉันandroid:backgroundTint="#5677FC" TextViewยังไม่มีประโยชน์. จากนั้นผมก็พยายามที่จะเปลี่ยนandroid:backgroundTintModeไปsrc_inและsrc_atopและพวกเขาไม่เคยสร้างความแตกต่าง ดังนั้นฉันจะเปลี่ยนสีของระลอกคลื่นได้อย่างไรเมื่อใช้?attr/selectableItemBackgroundเป็นพื้นหลัง ฉันเน้นเฉพาะ Lollipop ขึ้นไปเท่านั้น ขอบคุณล่วงหน้า!

107 android  android-layout  android-5.0-lollipop  material-design  android-appcompat 

ฉันต้องการแสดง Android Snackbar (android.support.design.widget.Snackbar)เมื่อกิจกรรมเริ่มต้นเหมือนกับที่เราแสดงไฟล์Toast. แต่ปัญหาคือเราต้องระบุเค้าโครงหลักเมื่อสร้างSnackbarเช่นนี้: Snackbar.make(parentlayout, "This is main activity", Snackbar.LENGTH_LONG) .setAction("CLOSE", new View.OnClickListener() { @Override public void onClick(View view) { } }) .setActionTextColor(getResources().getColor(android.R.color.holo_red_light )) .show(); จะให้เค้าโครงหลักได้อย่างไรเมื่อเราแสดงSnackbarเมื่อเริ่มกิจกรรมโดยไม่มีเหตุการณ์คลิก (หากเป็นเหตุการณ์การคลิกเราสามารถส่งผ่านมุมมองหลักได้อย่างง่ายดาย)

105 android  material-design  android-snackbar 

ฉันกำลังพยายามใช้ Design TabLayout ใหม่ในโครงการของฉัน ฉันต้องการให้เค้าโครงปรับให้เข้ากับทุกขนาดหน้าจอและการวางแนว แต่สามารถมองเห็นได้อย่างถูกต้องในทิศทางเดียว ฉันกำลังจัดการกับ Gravity และ Mode ที่ตั้งค่า tabLayout ของฉันเป็น: tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER); tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); ดังนั้นฉันคาดว่าถ้าไม่มีที่ว่าง tabLayout ก็เลื่อนได้ แต่ถ้ามีที่ว่างมันจะอยู่ตรงกลาง จากคำแนะนำ: GRAVITY_CENTER int สุดท้ายแบบคงที่สาธารณะใช้เพื่อจัดวางแท็บที่อยู่ตรงกลางของ TabLayout GRAVITY_FILL int สุดท้ายแบบคงที่สาธารณะใช้เพื่อเติม TabLayout ให้มากที่สุด ตัวเลือกนี้จะมีผลเมื่อใช้กับ MODE_FIXED เท่านั้น สาธารณะคง int สุดท้าย MODE_FIXED แท็บคงที่แสดงแท็บทั้งหมดพร้อมกันและใช้กับเนื้อหาที่ได้รับประโยชน์จากการหมุนอย่างรวดเร็วระหว่างแท็บ จำนวนแท็บสูงสุดถูก จำกัด โดยความกว้างของมุมมอง แท็บคงที่มีความกว้างเท่ากันตามป้ายแท็บที่กว้างที่สุด MODE_SCROLLABLE int สุดท้ายแบบคงที่สาธารณะแท็บที่เลื่อนได้จะแสดงชุดย่อยของแท็บในช่วงเวลาใดเวลาหนึ่งและสามารถมีป้ายกำกับแท็บที่ยาวขึ้นและแท็บจำนวนมากขึ้น เหมาะที่สุดสำหรับการเรียกดูบริบทในอินเทอร์เฟซแบบสัมผัสเมื่อผู้ใช้ไม่จำเป็นต้องเปรียบเทียบป้ายกำกับแท็บโดยตรง ดังนั้น GRAVITY_FILL จึงเข้ากันได้กับ MODE_FIXED เท่านั้น …

104 android  android-5.0-lollipop  material-design  gravity 

ฉันกำลังแสดงสแน็คบาร์ใน DialogFragment ภายในคลิกบวกของ alertDialog นี่คือข้อมูลโค้ดของฉัน Snackbar snackbar = Snackbar.make(view, "Please enter customer name", Snackbar.LENGTH_LONG) .setAction("Action", null); View sbView = snackbar.getView(); sbView.setBackgroundColor(Color.BLACK); snackbar.show(); ฉันกำลังส่งมุมมองของไดอะล็อกแฟรกเมนต์ไปที่สแน็คบาร์ ฉันต้องการพื้นหลังสีดำ? ฉันจะทำเช่นนี้ได้อย่างไร? ฉันกำลังส่งคืน alertDialog ใน DialogFragment และธีมที่ฉันตั้งค่าเป็นไดอะล็อกดังต่อไปนี้ <style name="MyAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert"> <!-- Used for the buttons --> <item name="colorAccent">@color/accent</item> <!-- Used for the title and text --> <item …

103 android  material-design  android-dialogfragment  android-snackbar 

ฉันสงสัยว่าจะใช้ไอคอนของวัสดุได้อย่างไรเนื่องจากไม่ได้ผล: <material-icon icon = "/img/icons/ic_access_time_24px.svg"> </material-icon> ฉันเดาว่ามีปัญหากับเส้นทางที่กำหนดให้เป็นพารามิเตอร์ของแอตทริบิวต์ icon ฉันต้องการทราบว่าโฟลเดอร์ไอคอนนี้อยู่ที่ไหน?

102 angularjs  material-design  angularjs-material 

ฉันต้องการใช้ไอออนิกกับการออกแบบวัสดุ ฉันติดขัดระหว่างการใช้คำสั่งไอออนิกกับ CSS ที่กำหนดเองและวัสดุเชิงมุม ฉันได้อ่านว่าการใช้คำสั่งไอออนิกทำให้เราได้รับคุณสมบัติที่มีประสิทธิภาพมากมายเช่น ระบบจะจดจำข้อมูลแอปด้วย UI-router แม้ว่าจะไปที่มุมมองอื่นและกลับมาที่หน้า รายการไอออนิกจะแสดงขึ้นเพื่อแสดงความสูงเท่านั้นและใช้ซ้ำได้เมื่อเลื่อนลงหรือขึ้น และการปรับปรุงประสิทธิภาพมากมาย แต่ถ้าฉันใช้คำสั่งไอออนิกพวกเขาไม่มีการออกแบบวัสดุ หากฉันใช้วัสดุเชิงมุมฉันจะไม่มีการปรับปรุงประสิทธิภาพเหล่านี้และคุณสมบัติพิเศษที่จำเป็นสำหรับแอปพลิเคชันมือถือ คำสั่งวัสดุเชิงมุมเป็นเหมือน <md-list> <md-item ng-repeat="item in items"> Hello, {{item}}! </md-item> </md-list> คำสั่งไอออนิกเป็นเหมือน <ion-list> <ion-item ng-repeat="item in items"> Hello, {{item}}! </ion-item> </ion-list> ดูเหมือนว่าIonic จะให้เงินสนับสนุนการพัฒนาโครงการวัสดุเชิงมุมแล้วเหตุใดวัสดุเชิงมุมจึงไม่สามารถใช้กับไอออนิกได้ ฉันจะใช้ส่วนประกอบวัสดุเชิงมุมโดยไม่สูญเสียการปรับปรุงประสิทธิภาพและคุณสมบัติของไอออนิกได้อย่างไร หรือ มีแนวคิดที่ดีกว่าในการใช้การออกแบบวัสดุด้วยไอออนิกหรือไม่?

98 javascript  angularjs  ionic-framework  ionic2  material-design