为电影迷编写一个Android应用-第2部分（设计）

哈Ha！

在本文中，我们将考虑根据第一部分中的布局创建屏幕的过程。

屏幕布局

主画面

主屏幕将包含片段和导航菜单。 创建图标之后，让我们编写菜单。 为此，请打开drawable文件夹，单击“ 新建” ，然后选择“ 向量资产” 。 在出现的窗口中，单击剪贴画，然后选择设置 ， 搜索和内容粘贴图标 。 大小将为24 x 24。

在values文件夹中创建一个字符串文件，并添加以下行：

<resources> <string name="title_home">Home</string> <string name="title_search">Search</string> <string name="title_settings">Settings</string> </resources> 

将所有行放在一个文件中将简化应用程序的进一步本地化。
如果要添加其他语言（例如俄语），请创建一个具有“ 语言环境”属性的文件，在“ 语言”列表中选择所需的语言，并在翻译后添加相同的行。

现在，我们直接继续创建菜单。 在菜单文件夹中，创建菜单资源文件 ，将其命名为“ bottom_nav_menu ”，然后向其中添加以下代码：

 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/navigation_home" android:icon="@drawable/ic_content_paste_black_24dp" android:title="@string/title_home"/> <item android:id="@+id/navigation_search" android:icon="@drawable/ic_search_black_24dp" android:title="@string/title_search"/> <item android:id="@+id/navigation_settings" android:icon="@drawable/ic_settings_black_24dp" android:title="@string/title_settings"/> </menu> 

在values文件夹中创建一个样式文件，并添加以下代码：

 <resources> <style name="MyLinearLayout"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">match_parent</item> <item name="android:orientation">vertical</item> </style> </resources> 

创建的样式用于视图以分离标记文件和样式文件。 它们包含负责元素外观和行为的格式化属性。 首先，您可以将所有属性写入标记文件，然后通过单击以下组合将它们导出到样式文件：RMB-> Refactor- > Extract- > Style 。 样式仅在视图内部可用。 在这里阅读更多有关此的内容。

之后，您可以直接继续为活动创建布局。 在布局文件夹中，创建一个布局资源文件 ，将其命名为“ activity_main ”并添加以下代码：

 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity" style="@style/MyLinearLayout"> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/fragment_container" android:layout_marginBottom="?attr/actionBarSize" /> <android.support.design.widget.BottomNavigationView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/nav_view" app:menu="@menu/bottom_nav_menu" android:background="#6986c2" android:layout_gravity="bottom"/> </FrameLayout> 

让我们看看发生了什么。

主页选项卡屏幕

打开样式文件，并使用子TextView和RecyclerView为工具栏添加样式：

  <style name="MyToolbar"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:background">#6986c2</item> </style> <style name="Toolbar_TextView"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">match_parent</item> <item name="android:gravity">center</item> </style> <style name="MyRecyclerView"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">match_parent</item> <item name="android:background">#fff</item> </style> 

将以下行添加到字符串文件：

  <string name="desc_home">Notification list</string> <string name="movie_title">Movie title</string> <string name="default_imdb_rating">IMDb rating: 7,4</string> 

现在创建一个名为“ fragment_home ”的布局，并向其中添加以下代码：

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="@style/MyLinearLayout"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar_home" style="@style/MyToolbar"> <TextView android:text="@string/desc_home" style="@style/Toolbar_TextView"/> </android.support.v7.widget.Toolbar> <android.support.v7.widget.RecyclerView android:id="@+id/recView_home" style="@style/MyRecyclerView"/> </LinearLayout> 

将“ 通知”和“ 无通知”图标添加到可绘制文件夹中。

让我们继续创建一个列表项。 将文件“ item_movie ”添加到布局文件夹，并在其中写入以下代码：

 <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="120dp" app:cardCornerRadius="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="8dp" android:layout_marginRight="16dp" android:layout_marginBottom="8dp" app:cardBackgroundColor="#00FFFFFF"> <ImageView android:layout_width="98dp" android:layout_height="98dp" app:srcCompat="@mipmap/ic_launcher" android:id="@+id/item_image" android:layout_gravity="center|start" android:layout_marginLeft="10dp"/> <TextView android:text="@string/movie_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/item_title" android:layout_marginTop="18dp" android:layout_marginLeft="120dp" android:textStyle="bold" android:textColor="@android:color/black" android:ellipsize="end" android:maxLines="1" android:layout_marginRight="16dp"/> <TextView android:text="@string/default_imdb_rating" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/item_rating" android:layout_marginLeft="120dp" android:layout_marginTop="50dp"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/ic_notifications_black_24dp" android:id="@+id/item_notification" android:layout_gravity="bottom|right" android:layout_marginRight="16dp" android:layout_marginBottom="16dp" tools:ignore="VectorDrawableCompat"/> </android.support.v7.widget.CardView> 

让我们看一下结果：

搜索标签画面

在字符串文件中，添加工具栏的标题：

 <string name="desc_settings">Preferences</string> 

并创建一个名为“ fragment_search ”的布局 ，同时添加以下代码块：

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="@style/MyLinearLayout"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar_search" style="@style/MyToolbar"> <android.support.v7.widget.SearchView android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/border_search_view" android:layout_marginRight="15dp" android:id="@+id/search_view"/> </android.support.v7.widget.Toolbar> <android.support.v7.widget.RecyclerView android:id="@+id/recView_search" style="@style/MyRecyclerView"/> </LinearLayout> 

让我们看看结果：

设置选项卡的屏幕

事实证明，此屏幕是最庞大的屏幕，因为它几乎没有重复的样式。

将TextView和CardView的代码添加到样式文件中：

  <style name="MyTextView"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:textStyle">bold</item> <item name="android:textColor">@android:color/black</item> <item name="android:layout_marginLeft">16dp</item> <item name="android:layout_marginTop">8dp</item> <item name="android:layout_marginBottom">8dp</item> <item name="android:typeface">normal</item> </style> <style name="MyCardView"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_margin">16dp</item> </style> 

还要在字符串文件中添加几行：

 <string name="imdb_rating">IMDb rating</string> <string name="default_rating">6</string> <string name="movie_genres">Movie genres</string> 

您还需要将星形边框图标添加到可绘制文件夹中。

创建一个名为“ fragment_settings ”的布局，并添加以下代码：

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" style="@style/MyLinearLayout" android:background="#fff"> <android.support.v7.widget.Toolbar style="@style/MyToolbar" android:id="@+id/toolbar_home" app:title="@string/desc_home"> <TextView android:text="@string/desc_settings" style="@style/Toolbar_TextView"/> </android.support.v7.widget.Toolbar> <android.support.v7.widget.CardView app:cardCornerRadius="16dp" app:cardBackgroundColor="#00FFFFFF" style="@style/MyCardView"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/ic_star_border_black_24dp" android:layout_gravity="right" android:layout_marginRight="50dp" android:layout_marginTop="8dp" tools:ignore="VectorDrawableCompat"/> <TextView android:text="@string/default_rating" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/rating_value" android:layout_gravity="right" android:layout_marginRight="40dp" android:layout_marginTop="8dp" android:textColor="#666666"/> <TextView android:text="@string/imdb_rating" android:id="@+id/textView" style="@style/MyTextView"/> <SeekBar style="@style/Widget.AppCompat.SeekBar.Discrete" android:layout_width="match_parent" android:layout_height="wrap_content" android:max="10" android:progress="6" android:id="@+id/seek_bar" android:layout_marginLeft="16dp" android:layout_marginTop="50dp" android:layout_marginBottom="20dp" android:layout_marginRight="16dp"/> </android.support.v7.widget.CardView> <android.support.v7.widget.CardView app:cardCornerRadius="16dp" app:cardBackgroundColor="#00FFFFFF" style="@style/MyCardView"> <TextView android:text="@string/movie_genres" style="@style/MyTextView"/> <android.support.v7.widget.RecyclerView android:layout_width="match_parent" android:layout_height="match_parent" android:background="#00FFFFFF" android:layout_marginLeft="16dp" android:layout_marginTop="36dp" android:layout_marginBottom="16dp" android:layout_marginRight="16dp" android:id="@+id/recView_settings"/> </android.support.v7.widget.CardView> </LinearLayout> 

为列表创建一个项目。 将文件“ item_genre ”添加到布局文件夹，并编写以下代码：

 <?xml version="1.0" encoding="utf-8"?> <CheckBox xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:text="@string/movie_genres" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/item_check_box" /> 

让我们看一下结果：

设计测试

让我们看一下屏幕同一部分的重绘频率，也就是说，正在做额外的工作。


蓝色-重绘一次。 好啊
颜色为绿色-重绘两次。 需要优化。
颜色为浅红色-重绘了3次。 太可惜了
红色-重绘4次以上。 出了点问题。
如果未完成任何绘制，则该图不会重绘。 辛苦了

为什么第二个屏幕截图上的所有内容都是红色？ 将白色背景添加到每个Layout，RecyclerView和CardView中，这导致图层重叠。 在上述设计中不是这种情况，该示例仅演示了样式化的成功应用。

在第一个屏幕截图中，LinearLayout上的Home片段仅使用了一个背景，使用以下方法以编程方式取消了其重绘：

 window.setBackgroundDrawable(null) 

让我们看看渲染帧需要多长时间。

Cyan负责创建和更新视图的时间。
紫色部分表示传输流的渲染资源所花费的时间。
红色是抽奖的时间。
橙色表示处理器等待GPU完成其工作所需的时间。 这是大量问题的根源。 - 亚历山大·克里莫夫

在我们的情况下，几乎所有选项卡都在不到16ms的时间内绘制，即在绿色条下方。 如果条形图大于此线，则程序可能会变慢。

结论

在下一篇文章中，我们将考虑使用服务器，并且在作者编写服务器时，您可以在下面的调查中评估当前的设计。

如果仍有任何不清楚之处，请在评论中提出问题。

如果您认为可以简化或改进设计（XML），请撰写相关内容。