Android语言基础教程（137）Android尺寸（dimen）资源范例之逐渐加宽的彩虹桥背景：Android尺寸资源全攻略：打造你的“彩虹桥”背景

初识Android尺寸资源：不只是px和dp那么简单

作为一名Android开发者，每次看到设计稿上标注的尺寸数字，你是不是总觉得头皮发麻？不同屏幕，不同分辨率，还要考虑横竖屏切换——这适配工作简直比在悬崖上走钢丝还难！

别急，让我们先从Android尺寸资源的基础说起。尺寸资源通常定义在 res/values/dimens.xml文件中。但有趣的是，自从Android Studio 3.2版本后，这个文件不再默认创建了，需要你手动创建：右键values文件夹，选择【New】→【XML】→【Values XML File】，然后输入dimens来创建。

最基础的尺寸资源定义长这样：

<resources>
  <dimen name="activity_horizontal_margin">16dp</dimen>
  <dimen name="activity_vertical_margin">16dp</dimen>
</resources>

这些看似简单的代码，却是构建视觉奇观的基石。

尺寸单位深潜：dp、sp、px到底用哪个？

Android支持的尺寸单位可真不少，让人眼花缭乱：

简单说：布局用dp，文字用sp，像素游戏用px，其他单位慎用！

彩虹桥背景实例：一步步搭建视觉盛宴

现在，让我们进入重头戏——创建一个逐渐加宽的彩虹桥背景！这个效果不仅视觉上吸引人，还能帮你深入理解尺寸资源的灵活运用。

第一步：定义彩虹色系和尺寸

首先在 res/values/colors.xml中定义彩虹七色：

<resources>
  <color name="red">#FF0000</color>
  <color name="orange">#FF7F00</color>
  <color name="yellow">#FFFF00</color>
  <color name="green">#00FF00</color>
  <color name="blue">#0000FF</color>
  <color name="indigo">#4B0082</color>
  <color name="violet">#9400D3</color>
</resources>

接着在 res/values/dimens.xml中定义逐渐加宽的条带尺寸：

<resources>
  <!-- 彩虹条带基础宽度 -->
  <dimen name="rainbow_base">16dp</dimen>
  <dimen name="rainbow_band1_width">@dimen/rainbow_base</dimen>
  <dimen name="rainbow_band2_width">20dp</dimen>
  <dimen name="rainbow_band3_width">24dp</dimen>
  <dimen name="rainbow_band4_width">28dp</dimen>
  <dimen name="rainbow_band5_width">32dp</dimen>
  <dimen name="rainbow_band6_width">36dp</dimen>
  <dimen name="rainbow_band7_width">40dp</dimen>
  
  <!-- 彩虹桥总高度 -->
  <dimen name="rainbow_total_height">200dp</dimen>
</resources>

第二步：创建彩虹条带可绘制形状

在 res/drawable中为每个彩虹颜色创建形状资源，例如红色条带：

<!-- shape_rainbow_red.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/red" />
    <corners android:radius="2dp" />
</shape>

为其他六种颜色重复此过程，创建对应的形状资源。

第三步：构建彩虹桥布局

现在在布局文件中组装我们的彩虹桥：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="@dimen/activity_vertical_margin">
 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="彩虹桥背景示例"
        android:textSize="20sp"
        android:gravity="center"
        android:layout_marginBottom="16dp" />
 
    <!-- 彩虹桥容器 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/rainbow_total_height"
        android:orientation="horizontal"
        android:background="@drawable/bridge_background"
        android:weightSum="7">
 
        <!-- 红色条带 -->
        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/shape_rainbow_red"
            android:layout_marginEnd="1dp" />
 
        <!-- 橙色条带 -->
        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/shape_rainbow_orange"
            android:layout_marginEnd="1dp" />
 
        <!-- 其他颜色条带... -->
        
    </LinearLayout>
    <!-- 显示当前尺寸信息 -->
    <TextView
        android:id="@+id/size_info"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="尺寸信息显示"
        android:gravity="center"
        android:layout_marginTop="16dp"
        android:textSize="16sp" />
 
</LinearLayout>

第四步：在代码中动态处理尺寸

在Activity中，我们可以获取并显示使用的尺寸信息：

public class RainbowBridgeActivity extends Activity {
    private TextView sizeInfoText;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_rainbow_bridge);
        
        sizeInfoText = findViewById(R.id.size_info);
        
        // 获取尺寸值
        Resources res = getResources();
        float band1Width = res.getDimension(R.dimen.rainbow_band1_width);
        float band2Width = res.getDimension(R.dimen.rainbow_band2_width);
        float totalHeight = res.getDimension(R.dimen.rainbow_total_height);
        
        // 显示尺寸信息
        String sizeInfo = String.format("彩虹条带宽度: %.1fdp, %.1fdp, ... | 总高度: %.1fdp", 
            pxToDp(band1Width), pxToDp(band2Width), pxToDp(totalHeight));
        sizeInfoText.setText(sizeInfo);
        
        // 动态调整示例：根据屏幕宽度调整彩虹桥尺寸
        adjustRainbowForScreenSize();
    }
    
    private float pxToDp(float px) {
        // 将px转换为dp
        float density = getResources().getDisplayMetrics().density;
        return px / density;
    }
    
    private void adjustRainbowForScreenSize() {
        // 获取屏幕宽度
        DisplayMetrics displayMetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        int screenWidth = displayMetrics.widthPixels;
        
        // 根据屏幕宽度动态调整彩虹桥视觉效果
        LinearLayout rainbowLayout = findViewById(R.id.rainbow_layout);
        ViewGroup.LayoutParams params = rainbowLayout.getLayoutParams();
        
        // 设置彩虹桥高度为屏幕宽度的1/3，创造视觉平衡
        params.height = screenWidth / 3;
        rainbowLayout.setLayoutParams(params);
    }
}

多屏幕适配技巧：让彩虹桥跨越所有设备

你的彩虹桥看起来在手机上很完美，但在平板上变成了狭窄的小独木桥？不同屏幕尺寸适配是Android开发的核心挑战。

为不同屏幕提供备用尺寸资源

创建不同的dimens.xml文件应对多种屏幕：

在平板上，你可能想让彩虹条带更宽：

<!-- res/values-sw600dp/dimens.xml -->
<resources>
  <dimen name="rainbow_base">24dp</dimen>
  <dimen name="rainbow_band1_width">@dimen/rainbow_base</dimen>
  <dimen name="rainbow_band2_width">30dp</dimen>
  <dimen name="rainbow_band3_width">36dp</dimen>
  <!-- 其他加宽尺寸 -->
</resources>

使用百分比或比例布局

对于彩虹桥这样的视觉元素，可以考虑使用PercentRelativeLayout或ConstraintLayout的比例约束，使条带宽度与屏幕宽度成比例，而非固定dp值。

尺寸资源的高级玩法

在代码中创建动态尺寸

有时，静态定义的尺寸资源不够用，你需要在代码中动态计算尺寸：

// 动态创建基于屏幕百分比的尺寸
DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
float screenWidth = displayMetrics.widthPixels;
float bandWidth = screenWidth / 7; // 7个均分条带
 
// 应用到视图
View redBand = findViewById(R.id.red_band);
ViewGroup.LayoutParams params = redBand.getLayoutParams();
params.width = (int) bandWidth;
redBand.setLayoutParams(params);

尺寸资源与动画结合

让彩虹桥动起来！使用属性动画改变尺寸：

// 动画展开彩虹桥
ValueAnimator widthAnimator = ValueAnimator.ofInt(0, maxWidth);
widthAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        Integer value = (Integer) animation.getAnimatedValue();
        ViewGroup.LayoutParams params = rainbowLayout.getLayoutParams();
        params.width = value;
        rainbowLayout.setLayoutParams(params);
    }
});
widthAnimator.setDuration(1000);
widthAnimator.start();

常见坑与解决方案

结语：从尺寸资源到视觉奇观

通过这个逐渐加宽的彩虹桥背景实例，我们不仅学会了Android尺寸资源的基本用法，还探索了多屏幕适配、动态尺寸计算和尺寸动画等高级技巧。尺寸资源虽小，却是构建优质Android应用的基石。

记住，优秀的Android开发者不只是写代码，而是创造跨越不同设备的视觉体验——就像一座真正的彩虹桥，无论设备大小，都能呈现令人惊叹的美感。

现在，去构建属于你自己的彩虹桥吧！让它成为你应用中的一道亮丽风景，为用户带来愉悦的视觉旅程。