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

การออกแบบวัสดุเป็นคำแนะนำของ Google สำหรับการออกแบบภาพการเคลื่อนไหวและการโต้ตอบในแพลตฟอร์มและอุปกรณ์ที่มาพร้อมกับ Android 5.0 Lollipop

16
TextInputLayout ไม่แสดงคำใบ้ EditText ก่อนที่ผู้ใช้จะโฟกัสที่มัน
ฉันใช้Android Design Support Library ที่เพิ่งเปิดตัวเพื่อแสดงป้ายกำกับแบบลอยพร้อม EditTexts แต่ฉันกำลังประสบปัญหาที่คำแนะนำบน EditText ไม่แสดงเมื่อแสดงผล UI แต่ฉันเห็นคำแนะนำหลังจากที่ฉันโฟกัสที่ EditTexts รูปแบบของฉันมีดังนี้: <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <ScrollView android:id="@+id/ScrollView01" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical"> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin"> <android.support.design.widget.TextInputLayout android:id="@+id/name_et_textinputlayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/activity_vertical_margin"> <EditText android:id="@+id/FeedBackerNameET" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="@string/feedbackname" android:inputType="textPersonName|textCapWords" /> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:id="@+id/email_textinputlayout" android:layout_width="match_parent" …

7
Angular - 'ไม่พบ HammerJS'
ฉันกำลังทำโปรเจ็กต์เชิงมุมง่ายๆที่ฉันกำลังพยายามนำเข้าดีไซน์ Material เข้ามาในโปรเจ็กต์ของฉัน แต่ส่วนประกอบบางอย่างทำงานไม่ถูกต้องและคำเตือนของคอนโซลบอกว่า: ไม่พบ HammerJS ส่วนประกอบ Angular Material บางอย่างอาจทำงานไม่ถูกต้อง ฉันได้รับการติดตั้งและhammerjs @angular/materialฉันจะแก้ไขปัญหานี้ได้อย่างไร Sidenote มันอาจจะเป็นที่น่าสังเกตว่าหากคุณมีhammerjsการติดตั้งและอุปกรณ์ของคุณจะยังคงแสดงผลได้อย่างถูกต้องเพื่อให้แน่ใจว่าคุณกำลังใช้angular material ส่วนประกอบและไม่องค์ประกอบ HTML กับการเรียนmaterialize-css หากคุณกำลังใช้materialize-cssแทนangular material, คุณจะต้องเพิ่มในโครงการของคุณต่างหาก

4
ใช้ Material Design Touch Ripple กับ ImageButton ไหม
ฉันมีปุ่มรูปภาพที่ไม่ตอบสนองด้วยภาพเคลื่อนไหวแบบสัมผัสเมื่อคลิกเพราะมันเป็นภาพนิ่งไม่เหมือนกับปุ่มทั่วไปบนอมยิ้มซึ่งมาพร้อมกับเอฟเฟกต์ระลอกคลื่นในตัว ฉันต้องการเพิ่มเอฟเฟกต์การสัมผัสระลอกคลื่นดีไซน์ Material ให้กับรูปภาพ แต่ดูเหมือนจะหาวิธีนำไปใช้ไม่ได้ ฉันสามารถตั้งค่าฟิลเตอร์สีบนรูปภาพได้ แต่นั่นไม่ใช่เอฟเฟกต์การกระเพื่อม ตัวอย่างของสิ่งที่ฉันพยายามทำคือเมื่อคุณถือภาพปกอัลบั้มใน Google Play Music และมีเงากระเพื่อมเคลื่อนผ่านรูปภาพ

11
วิธีเพิ่มหลายคลาสใน UI วัสดุโดยใช้อุปกรณ์ประกอบฉาก
การใช้เมธอด css-in-js เพื่อเพิ่มคลาสให้กับคอมโพเนนต์การตอบสนองฉันจะเพิ่มคอมโพเนนต์หลายรายการได้อย่างไร นี่คือตัวแปรคลาส: const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 }, }); นี่คือวิธีที่ฉันใช้: return ( <div className={ this.props.classes.container }> ข้างต้นใช้งานได้ แต่มีวิธีเพิ่มทั้งสองคลาสโดยไม่ใช้classNamesแพ็คเกจ npm หรือไม่? สิ่งที่ต้องการ: <div className={ this.props.classes.container + this.props.classes.spacious}>

10
วิธีเพิ่มฉลากลอยบน Spinner
หลังจากใช้ไลบรารีการสนับสนุนการออกแบบของ Android TextInputLayoutเพื่อวางป้ายลอยไว้เหนือEditTextส่วนประกอบฉันสงสัยว่ามีวิธีเพิ่มป้ายกำกับแบบลอยให้กับSpinnerส่วนประกอบหรือไม่ (ไม่จำเป็นต้องใช้ไลบรารีการออกแบบ) ด้วยเหตุนี้ฉันหมายถึงสิ่งที่คล้ายกับสิ่งที่TextViewวางไว้เหนือSpinner(เห็นได้ชัดว่าไม่มีภาพเคลื่อนไหวเหมือนTextInputLayout) แต่ฉันต้องการให้ขนาดตัวอักษรแบบอักษรและสีตรงกับTextInputLayoutป้ายกำกับลอยของ ตัวอย่างเช่นจะมีลักษณะดังนี้ (ดูป้ายกำกับด้านบนSpinners): ดังที่ฉันได้กล่าวไว้ก่อนหน้านี้จุดมุ่งหมายหลักของฉันคือการมีป้ายกำกับด้านบนSpinnerเช่นเดียวกับในTextInputLayoutขนาดข้อความแบบอักษรสีและระยะห่างระหว่างป้ายกำกับและส่วนประกอบจะเหมือนกัน ในหน้าการออกแบบของ Google เกี่ยวกับช่องข้อความป้ายกำกับแบบลอยมีแผนภาพที่แสดงขนาดของป้ายกำกับที่สัมพันธ์กับส่วนประกอบ แต่ไม่มีการระบุสีหรือขนาดข้อความป้ายกำกับ: ดังนั้นเพื่อสรุปฉันกำลังถามว่า: - หากมีองค์ประกอบพิเศษเพื่อให้บรรลุสิ่งที่ฉันขอหรือมุมมองแบบกำหนดเองที่ฉันสามารถใช้ได้มันจะเป็นอย่างไรและฉันจะใช้มันได้อย่างไร - ถ้าไม่ใช่ขนาดตัวอักษรสีและแบบอักษรของป้ายกำกับแบบลอยคืออะไรเพื่อที่ฉันจะได้วางTextViewด้านบนSpinnerด้วยขนาดเค้าโครงที่แสดงในภาพด้านบน แก้ไข: จากหลักเกณฑ์การออกแบบของ Google สำหรับช่องข้อความมีดังต่อไปนี้สำหรับป้ายกำกับแบบลอย: คำแนะนำและแบบอักษรป้อน: Roboto Regular 16sp Label font: Roboto Regular 12sp Tile height: 72dp Text top and bottom padding: 16dp Text field divider padding: 8dp เช่นเดียวกับภาพที่แสดงด้านบน ดังนั้นตัวอักษรป้ายลอย: Roboto 12sp คุณจึงสามารถใช้ …

12
วิธีเปลี่ยนสีของไอคอนแฮมเบอร์เกอร์ในลิ้นชักการนำทางออกแบบวัสดุ
ฉันกำลังทำตามตัวอย่างนี้ http://www.androidhive.info/2015/04/android-getting-started-with-material-design/ และในตัวอย่างนี้แสดงไอคอนแฮมเบอร์เกอร์เป็นสีขาวฉันต้องการปรับแต่งและทำให้เป็นสีดำ แต่ฉันไม่พบสิ่งใดที่จะเปลี่ยนแปลงได้มีใครบอกวิธีปรับแต่งได้ไหม ประจักษ์ <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="info.androidhive.materialdesign" > <uses-permission android:name="android.permission.INTERNET"></uses-permission> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"></uses-permission> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:theme="@style/MyMaterialTheme" > <activity android:name=".activity.MainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest> สไตล์ <resources> <style name="MyMaterialTheme" parent="MyMaterialTheme.Base"> </style> <style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="windowNoTitle">true</item> <item name="windowActionBar">false</item> <item name="colorPrimary">@color/colorPrimary</item> <item …

9
Navigation Drawer กึ่งโปร่งใสบนแถบสถานะไม่ทำงาน
ฉันกำลังทำโปรเจ็กต์ Android และกำลังใช้งาน Navigation Drawer ฉันกำลังอ่านผ่านใหม่วัสดุการออกแบบ Specและรายการตรวจสอบการออกแบบวัสดุ ข้อมูลจำเพาะระบุว่าบานหน้าต่างเลื่อนออกควรลอยอยู่เหนือสิ่งอื่นใดรวมถึงแถบสถานะและเป็นแบบกึ่งโปร่งใสบนแถบสถานะ แผงการนำทางของฉันอยู่เหนือแถบสถานะ แต่ไม่มีความโปร่งใสใด ๆ ฉันได้ติดตามโค้ดจากโพสต์SOนี้ตามที่แนะนำในบล็อกสปอตนักพัฒนาของ Google ลิงก์ด้านบนฉันจะใช้ DrawerLayout เพื่อแสดงบน ActionBar / Toolbar และภายใต้แถบสถานะได้อย่างไร . ด้านล่างนี้คือเลย์เอาต์ XML ของฉัน <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/my_drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/my_awesome_toolbar" android:layout_height="wrap_content" android:layout_width="match_parent" android:minHeight="?attr/actionBarSize" android:background="@color/appPrimaryColour" /> </LinearLayout> <LinearLayout android:id="@+id/linearLayout" android:layout_width="304dp" android:layout_height="match_parent" android:layout_gravity="left|start" android:fitsSystemWindows="true" android:background="#ffffff"> <ListView …

10
วิธีจัดทำเงาให้กับปุ่ม
อย่างที่คุณเห็นในภาพฉันต้องการเงาหลังไฟล์Button. ฉันได้สร้างButtonด้วยมุมมน แต่ปัญหาคือฉันไม่สามารถสร้างเงาหลังนั้นButtonได้ ฉันจะบรรลุเป้าหมายนี้ได้อย่างไร?

9
FloatingActionButton พร้อมข้อความแทนรูปภาพ
ฉันกำลังพยายามหาวิธีแก้ไข FloatingActionButton จากไลบรารีสนับสนุนของ Android ใช้กับข้อความแทนรูปภาพได้หรือไม่? บางอย่างเช่นนี้: ฉันเห็นว่ามันขยาย ImageButton ดังนั้นฉันคิดว่าไม่ใช่ ฉันถูกไหม? สิ่งนี้ถูกต้องในแง่ของการออกแบบวัสดุโดยทั่วไปหรือไม่
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.