Question

我想在我的Android移动界面中添加一个按钮或视图网格。每个按钮应如下所示

如何使用两种不同的文本样式绘制这样的按钮或视图。很明显，数据

158.0

将继续从服务器更新。请建议我。

Answer 1

----------
Create a layout like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@color/dim_grey">

  <!--  <LinearLayout
        android:id="@+id/no_trips"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:orientation="vertical"
        android:visibility="gone">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-smallcaps"
            android:gravity="center"
            android:text="@string/no_active_trips"
            android:textColor="@color/rose"
            android:textSize="14sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:fontFamily="sans-serif-smallcaps"
            android:gravity="center"
            android:text="@string/you_online"
            android:textColor="@color/dark_greem"
            android:textSize="20sp"
            android:textStyle="bold" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/in_trip_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="4dp"
        android:visibility="gone"
        tools:ignore="UseCompoundDrawables">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:contentDescription="@null"
            android:minHeight="75dp"
            android:minWidth="75dp"
            android:src="@drawable/ic_car_24dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-smallcaps"
            android:gravity="center"
            android:text="@string/in_a_trip"
            android:textColor="@color/primaryDark_violet"
            android:textSize="18sp"
            android:textStyle="bold" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/offline_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="4dp"
        android:visibility="gone">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:gravity="center"
            android:text="@string/you_offline"
            android:textSize="30sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="18dp"
            android:gravity="center"
            android:text="@string/go_online_to_se"
            android:textColor="@color/rose"
            android:textSize="16sp" />

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/go_online"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ripple"
            android:gravity="center"
            android:minHeight="0dp"
            android:padding="10dp"
            android:text="@string/go_online"
            android:textColor="@color/white" />


    </LinearLayout>


    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:layoutManager="android.support.v7.widget.LinearLayoutManager" />-->


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_centerInParent="true"
        android:background="@drawable/rectangle_border"
        android:padding="16dp">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="18dp"
            android:background="@drawable/rectangle_border"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Coolant\ntemperature"
                android:gravity="center"
                android:padding="2dp"
                android:layout_marginBottom="8dp"/>

            <TextView
                android:id="@+id/heat_value"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="150.6"
                android:gravity="center"
                android:textSize="28sp"
                android:padding="2dp"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="F"
                android:textSize="20sp"/>

        </LinearLayout>


    </LinearLayout>


</RelativeLayout>


    ----------
    Download custom font style and add it under "font" folder in res
    You can download digitalfont.ttf as you need

    I downloaded this font from here -> http://www.1001fonts.com

    ----------
    Then in Java file 

    TextView updatableTv;
    updatableTv = (TextView) findViewById(R.id.heat_value);

    Typeface customTypeface = ResourcesCompat.getFont(this, R.font.digital_clock);
    updatableTv.setTypeface(customTypeface);

    now update your textview with values from server

Answer 2

您可以通过多种方式完成此操作，我在这里使用downloadable fonts，

在模块的build.gradle文件中添加依赖项：

dependencies { compile 'com.android.support:support-compat:26.0.1' }
在项目级build.gradle文件中添加Google的maven存储库：

repositories { google() }

现在创建具有多个TextView的xml文件，其中包含不同的可下载字体：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:orientation="vertical">

<TextView
    android:id="@+id/tempText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:text="Coolant Temperature"
    android:textSize="20sp"
    app:fontFamily="@font/sanchez" />

<TextView
    android:id="@+id/tempVal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:paddingBottom="10dp"
    android:paddingTop="10dp"
    android:text="158.0"
    android:textSize="30sp"
    app:fontFamily="@font/orbitron_medium" />

<TextView
    android:id="@+id/tempUnit"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:text="F"
    android:textSize="20sp"
    app:fontFamily="@font/sanchez" />
</LinearLayout>

选择TextView更改其字体并切换为＆＃34; Design＆＃34;模式
选择＆＃34; fontFamily＆＃34;选项来自＆＃34;属性＆＃34;，点击＆＃34;更多字体＆＃34;并选择所需的字体

有关详细信息，请参阅此帖：downloadable-fonts-with-support-library

使用不同的文本样式绘制自定义视图或按钮

2 个答案: