Blog

Blog

PHODAL

大前端 Android 开发日记三:使用 ViewHolder 与 XML 编写 UI

在之前的两天里,我花了大量的时间在熟悉系统的架构上。因此,在这一天里,我主要花费的时间都是在编写 UI 上,以及对应的一些事件处理。

ViewHolder 的事件

按官网的说明:

一个 ViewHolder 描述一个项目视图和关于它在 RecyclerView 中的位置的元数据。

对于我使用例子是,我是在我的列表中的条目中使用 ViewHolder,因此每个条目都是单一的 view。这是一个示例的 ViewHolder,我在它的构建类里添加了一个 onClick 事件:

public class RelatedViewHolder extends RecyclerView.ViewHolder {
    public RelatedNewsViewHolder(View view) {
        super(view);
        this.view = view;
        ButterKnife.bind(this, view);

        onClick(view);
    }
}

而在这个 Click 事件里,启动了一个新的 Activity:

public void onClick(View itemView) {
    itemView.setOnClickListener(view -> {
        Intent intent = new Intent();
        Context context = itemView.getContext();

        intent.setComponent(new ComponentName(context, DetailActivity.class));
        context.startActivity(intent);
    });
}

在这里面里,我们会启动一个新的 Activity。

获取 Android Device UUID

在实现的过程中,还需要一个获取设备的 UUID。DeviceID 有一个问题时,用户可能不会同意获取,于是还需要一个新的 UUID。为了简化这个逻辑,直接使用 Google 推荐的 UUID,而不是再去用 DeviceID。

public class DeviceUtil {
    private static String uniqueID = null;
    private static final String PREF_UNIQUE_ID = "PREF_UNIQUE_ID";

    public synchronized static String getDeviceUUID(Context context) {
        if (uniqueID == null) {
            SharedPreferences sharedPrefs = context.getSharedPreferences(
                    PREF_UNIQUE_ID, Context.MODE_PRIVATE);
            uniqueID = sharedPrefs.getString(PREF_UNIQUE_ID, null);
            if (uniqueID == null) {
                uniqueID = UUID.randomUUID().toString();
                SharedPreferences.Editor editor = sharedPrefs.edit();
                editor.putString(PREF_UNIQUE_ID, uniqueID);
                editor.apply();
            }
        }
        return uniqueID;
    }
}

在这个逻辑里,会判断机器上是否存储有之前的 UUID。如果没有的话,就生成一个新的;反之,则从 SharedPreferences 中获取一份。

实现 Android 后退按钮

由于打开的是新的页面,因此需要自己做一个 Toolbar,相应的配置代码如下所示:

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:toolbar="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimaryDark"
    android:gravity="center"
    app:theme="@style/ToolbarColoredBackArrow"
    toolbar:titleTextColor="@color/cmb_white">

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="xxx" />

</android.support.v7.widget.Toolbar>

接着,定制一个新的返回按钮标题:

<style name="ToolbarColoredBackArrow" parent="AppTheme">
    <item name="android:textColorSecondary">#FFFFFF</item>
</style>

然后,导入这个 xml:

<include layout="@layout/toolbar" />

同时在我们的 Activity 中添加对应的事件处理:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if (item.getItemId() == android.R.id.home) {
        onBackPressed();
        return true;
    }
    return super.onOptionsItemSelected(item);
}

矢量图形:Vector Path

还遇到一个很有遇到的问题是,可以在 Android 中使用类似于 SVG 的 Vector:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:height="64dp"
     android:width="64dp"
     android:viewportHeight="600"
     android:viewportWidth="600" >
     <group
         android:name="rotationGroup"
         android:pivotX="300.0"
         android:pivotY="300.0"
         android:rotation="45.0" >
         <path
             android:name="v"
             android:fillColor="#000000"
             android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
     </group>
 </vector>

它也是类似的使用 Path,来描述 UI。

ScrollView

最后,花费了一些时间在编写一个 ScrollView 上,结合了之前上面的 Toolbar 等内容:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/cmb_white"
    android:orientation="vertical">

    <include layout="@layout/toolbar" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none">

        <LinearLayout
            android:id="@+id/detail"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

        </LinearLayout>
    </ScrollView>
</LinearLayout>

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签