Android スタジオ インターフェイス ui の最適化

モバイル 2023-05-08 01:58:12 訪問数: null

完全なインターフェースの最適化を記録する

目次

1.TableRowを美化して下枠を実現

効果図:
ここに画像の説明を挿入
方法: xml ファイルを作成し、xml ファイルを参照します。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <item>
        <shape>
<!--            边框颜色-->
            <solid android:color="#ebebeb" />
        </shape>
    </item>

    <item
        android:bottom="2dp">  //有四个方向可以选择，这里选择底部
        <shape>
<!--            背景颜色-->
            <solid android:color="@color/lightgreen" />
        </shape>
    </item>

</layer-list>

下の境界線はビューで直接実装できる場合もありますが、tablelayout を linearlayout に変更したくないので、このメソッドの
ビュー メソッドは使用しません。

  <View
                android:layout_width="match_parent"
                android:layout_height="1px"
                android:background="@color/lightgreen" />

2. ボタンを美しくする

  • 背景が透明になり、
    影がキャンセルされます レンダリング画像:
    ここに画像の説明を挿入

             android:backgroundTint="#0000"
         android:stateListAnimator="@null"

  • ボタンをクリックして、色
    効果の画像を変更し
    ここに画像の説明を挿入
    、xml ファイルを作成します

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--    设置按钮圆角按钮的步骤-->
    <!--    1.设置圆角的半径-->
    <!--    2.设置按钮的颜色-->
    <!--    3.设置边框大粗细和颜色-->
    <corners android:radius="10dp"/>
    <solid android:color="@color/lightgreen"/>
    <stroke android:width="1dp"
        android:color="@color/lightgreen"/>
</shape>

次に、コードブロックでクリックされたときに表示される形式を設定し、クリックされていないときは形式が空になります

                activity.setBackground(null);
                goods.setBackground(null);
                feedback.setBackground(getResources().getDrawable(R.drawable.button_shape));
  • ドット フレーム
    レンダリング:
    ここに画像の説明を挿入
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="10dp"/>
    <!--        dashGap和dashWidth一起作用产生虚线效果-->
    <stroke
        android:dashGap="20dp"
        android:dashWidth="20dp"
        android:width="1dp"
        android:color="@color/iconColor"/>
</shape>
  • プレースホルダー

3. アイコンの色を変更する

効果画像:
変更前:ここに画像の説明を挿入
変更後:方法: ここに画像の説明を挿入
xml ファイルでapp:tint="@color/alarmColor"使用

4. アバターがカードの真ん中にあることに気づく

効果図:
ここに画像の説明を挿入
アイデア: relativeLayout レイアウトを使用し、カードの下にアバターを作成し、 android:layout_marginTop="-50dp"位置を調整します

問題: Imagview がカードによってブロックされ、カードの上に表示できないことがわかります。

解決策: cardview 参照 android:elevation="10dp"、アバターが設定されている android:elevation="20dp"、つまり、アバターの値が cardview より大きい

ps: 不要なネストされたレイアウトはすべて削除する必要があります. 同時に, カードの値を 0 に設定しないことをお勧めします. 0 に設定すると、アバターの値がより大きくても機能しません. 0

5.ポップアップウィンドウの美化

効果画像:
ここに画像の説明を挿入
ps: 最初に xml ファイルを作成します

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="200dp"
    android:layout_gravity="center"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardCornerRadius="20dp">

    <RelativeLayout
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <androidx.cardview.widget.CardView
        android:id="@+id/card1"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:backgroundTint="@color/mainBackground"
        android:layout_height="wrap_content"
        app:cardCornerRadius="10dp">

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

            <TextView
                android:id="@+id/tv_createQRCode"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:gravity="center"
                android:textSize="18dp"
                android:textColor="@color/textColor"
                android:text="生成签到码" />
            <View
                android:layout_width="match_parent"
                android:layout_height="1px"
                android:background="@color/lightgreen" />

            <TextView
                android:id="@+id/tv_signInForm"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:gravity="center"
                android:textSize="18dp"
                android:textColor="@color/textColor"
                android:text="下载报名表" />
            <View
                android:layout_width="match_parent"
                android:layout_height="1px"
                android:background="@color/lightgreen" />

            <TextView
                android:id="@+id/tv_entryForm"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:gravity="center"
                android:textSize="18dp"
                android:textColor="@color/textColor"
                android:text="下载签到表" />
            <View
                android:layout_width="match_parent"
                android:layout_height="1px"
                android:background="@color/lightgreen" />

            <TextView
                android:id="@+id/tv_delete"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:gravity="center"
                android:textSize="18dp"
                android:textColor="#E36B6B"
                android:text="删除活动" />
            
        </LinearLayout>

    </androidx.cardview.widget.CardView>

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

        <ImageView
            android:layout_marginTop="10dp"
            android:id="@+id/imageView6"
            android:layout_gravity="center_horizontal"
            app:tint="@color/lightgreen"
            android:layout_width="30dp"
            android:layout_height="30dp"
            app:srcCompat="@drawable/delete_pic" />

        </LinearLayout>

    </RelativeLayout>

</LinearLayout>

次に、アイコンをクリックして、コード ブロックにポップアップ ウィンドウを表示します。

 menu.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //创建弹窗
                builder = new AlertDialog.Builder(ActivityDetailActivity.this);
                inflater = getLayoutInflater();
                layout = inflater.inflate(R.layout.dialog_menu, null);//获取自定义布局
                builder.setView(layout);//设置对话框的布局
                dialog = builder.create();//生成最终的对话框
                dialog.show();//显示对话框

                //弹窗背景透明
                dialog.setCanceledOnTouchOutside(true);
                Window window = dialog.getWindow();
                window.setContentView(R.layout.dialog_menu);
                ((Window) window).setBackgroundDrawable(new ColorDrawable(0x00000000));
                WindowManager windowManager = ActivityDetailActivity.this.getWindowManager();
                Display display = windowManager.getDefaultDisplay();
                WindowManager.LayoutParams lp = dialog.getWindow().getAttributes();
                lp.height = WindowManager.LayoutParams.MATCH_PARENT; //设置宽度
                lp.width = WindowManager.LayoutParams.MATCH_PARENT; //设置宽度
//                lp.gravity = Gravity.BOTTOM;
                window.setGravity(Gravity.CENTER);
                dialog.getWindow().setAttributes(lp);
                }
                }

ps: でも実際には、ポップアップ ウィンドウがこのコードの最下部にあることを認識したいのですが、Gravity.Bottom が機能しない理由がわかりません。後で、の位置を変更しました。位置変更を実現するxmlファイルのポップアップウィンドウですが、誤って背景が透明になっています

pps: ポップアップ ウィンドウの位置が変わらない場合は、xml の幅と高さが match_parent かどうかを確認してください。そうしないと、ポップアップ ウィンドウの位置が変わらない可能性があります。

pps:dialog.setCanceledOnTouchOutside(true)うまくいかない、幅と高さを変更してみてください (幅と高さを直接設定しなくても問題ないことがわかりました) 参考記事: Android Dialog setCanceledOnTouchOutside(ture) が無効な問題

ppps: このように設定すると、ポップアップ ウィンドウをクリックしても反応しない場合があることがわかりました window.setContentView(R.layout.dialog_menu);。

6. editテキストの美化

editText の下線を削除します。2
つの方法があります。1 つは背景を @null に設定する方法、もう 1 つは背景を 00FFFFFF に設定する方法です。

7. カードの利用

  • 影を追加する: app:cardElevation="@dimen/fab_margin"

体験概要：

  • 多くのコントロールのサイズと色が関係する場合は、参照メソッドを使用してみてください。つまり、直接 #FFFFFF する代わりに @color/viewColor を使用します。1 つずつ変更せずに後で変更する方が便利だからです
  • レイアウトはrelativelayoutを使うのがベストです（個人的には一番便利だと思います）

おすすめ

転載: blog.csdn.net/zzzzzwbetter/article/details/129954783
おすすめ
ランキング
--- ELオプションを搭載するテンプレートを指定するオプションをレンダリング別テンプレート/使用を指定するためのオプションを使用して、インラインテンプレート/テンプレートの使用を指定するために、テンプレート/テンプレートオプションを使用してテンプレートを指定します
0216leetcodeはPythonで5つの質問をブラシします
ショック！七つの子どもたちは魂を拷問しました！暴露子どもたちはインサイダーを振っプログラム！
ターゲット属性タグをhtmlの
Linuxビルドnacosスタンドアロンバージョンとクラスター
Cálculo experimental da renda simulada de investimento fixo do fundo
Kali Linux は VMware ツールをインストールします (vmtools ボタンは灰色です)
程序员洞察报告：90后占比过半 搜索算法等岗位人才短缺
【Java基礎シリーズチュートリアル】第17章 Javaアノテーション
Javaでの空白を入力できないようにユーザー
アーカイブ
もっと
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)

コードワールド

© 2018 codetd.com