Android的Elevation与TranslationZ探索

本文介绍Android中视图控件的高度属性Elevation与TranslationZ的区别及使用方法。通过实例展示如何设置这两个属性来调整视图的阴影效果,实现不同高度的视觉表现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

文章目录

Elevation

表示视图控件所在的高度,值越大对应的阴影越大,看起来高度越高
###TranslationZ
同样表示视图控件所在的高度,但是其表示的是相对高度

例子

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zxl.test_elevation.MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal"
                android:background="#3f51b5"
                android:elevation="2dp">

            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal">

            </LinearLayout>

        </LinearLayout>

        <TextView
            android:id="@+id/tv"
            android:layout_width="80dp"
            android:layout_height="48dp"
            android:gravity="center"
            android:layout_gravity="center"
            android:text="test"
            android:background="#448aff"
            android:elevation="6dp"/>

    </FrameLayout>

</LinearLayout>
public class MainActivity extends AppCompatActivity {

    private TextView tv;

    private boolean isSelected = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tv = findViewById(R.id.tv);

        tv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(!isSelected){
                    isSelected = true;
                    tv.setTranslationZ(6);
                    System.out.println("zxl--->0--->"+tv.getElevation()+"--->"+tv.getTranslationZ());
                }else{
                    isSelected = false;
                    tv.setTranslationZ(-6);
                    System.out.println("zxl--->1--->"+tv.getElevation()+"--->"+tv.getTranslationZ());
                }
            }
        });
    }
}

这里写图片描述

说明

        01-23 14:53:23.620 7029-7029/com.zxl.test_elevation I/System.out: zxl--->0--->6.0--->6.0
        01-23 14:53:30.678 7029-7029/com.zxl.test_elevation I/System.out: zxl--->1--->6.0--->-6.0

从程序运行后log可以看出
视图控件的整个高度值是Elevation+TranslationZ,当其值为0时则没有阴影了,当其值小于0在在上一个控件下方,当其值大于0则有阴影,从而出现高度。

<think>好的,用户想了解Android UI设计的相关内容,特别是设计指南和组件详解。首先,我需要确定用户的需求层次。他们可能是一名刚入门的Android开发者,或者是想了解设计规范的设计师。因此,回答需要兼顾理论和实践,涵盖设计原则和具体组件。 首先,我应该回忆Android官方文档中的Material Design指南,这是UI设计的核心。需要提到设计原则,比如颜色、排版、图标等,这些是构建一致界面的基础。然后,具体到组件,常见的如Button、TextView、RecyclerView等,每个组件的使用场景和最佳实践都需要简要说明。 接着,用户可能想知道如何实现这些组件,所以需要提供一些代码示例,比如XML布局和Kotlin代码。要注意代码的简洁性和正确性,比如展示如何创建一个MaterialButton并设置属性。 另外,用户提到的Material-UI是React的库,但Android原生使用的是Material Components for Android,这点需要明确区分,避免混淆。可能需要解释两者之间的关系,但重点放在Android原生组件上。 还要考虑用户可能对最新的设计趋势和适配不同设备(如折叠屏、大屏)的需求,这部分内容可以放在设计规范更新中,展示Android UI设计的动态发展。 最后,生成相关问题时要围绕用户可能进一步探索的方向,比如设计工具、组件库选择、暗黑模式实现等,帮助他们深入学习和解决问题。 需要确保回答结构清晰,分点列出,使用中文,并正确应用LaTeX格式。同时,引用之前提供的Material-UI文档作为参考,但注意用户实际需要的是Android的内容,可能需要调整引用相关性,但根据用户给出的引用,这里可能是指Material Design的通用原则,所以可以合理引用。</think>### Android UI设计指南及组件详解 Android UI设计遵循Material Design规范,提供一致的用户体验和视觉语言。以下是核心设计指南和常用组件的解析: #### 一、Material Design三大基础原则 1. **实体隐喻** 通过光影、动画模拟真实世界物理规律,例如按钮按下时的涟漪效果[^1]。 2. **鲜明视觉层次** 使用$z$轴分层(通过`elevation`属性实现),典型应用场景: ```xml <Button android:elevation="4dp" android:translationZ="8dp"/> ``` 3. **有意义的动效** 遵循$duration=300ms$的基准动画时长,保持操作连贯性。 #### 二、核心组件实现详解 1. **导航组件** - BottomNavigationView:实现底部导航 ```kotlin bottom_nav.setupWithNavController(findNavController(R.id.nav_host)) ``` - 适配参数:`app:menu="@menu/navigation_menu"` 2. **布局容器** ```xml <androidx.constraintlayout.widget.ConstraintLayout tools:context=".MainActivity"> <TextView app:layout_constraintTop_toTopOf="parent"/> </androidx.constraintlayout.widget.ConstraintLayout> ``` 3. **数据展示组件** - RecyclerView性能优化公式: $$ \text{滚动帧率} \geq 60fps \Rightarrow \text{单帧耗时} \leq 16ms $$ #### 三、最新设计规范更新 1. **动态颜色方案** 通过MaterialColorUtilities实现: ```kotlin val dynamicColors = DynamicColorsOptions.Builder() .setThemeOverlay(R.style.AppDynamicTheme) .build() ``` 2. **大屏设备适配** 使用SlidingPaneLayout实现列表-详情视图: ```xml <androidx.slidingpanelayout.widget.SlidingPaneLayout android:layout_width="match_parent" android:layout_height="match_parent"> <ListView android:id="@+id/list"/> <FrameLayout android:id="@+id/detail"/> </androidx.slidingpanelayout.widget.SlidingPaneLayout> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值