关于Android界面适配的思考及最终解决方案

Posted 2023-05-05

参考技术A

一直以来都用 px映射表 来解决不同界面的适配性问题（参考： android界面开发精要1：尺寸 ）。最近在一些设备上发现，这种方案也有弊端：以UI图的基础设计是基于720*1280（如Galaxy Nexus）为例，最近发现有些设备的像素宽高比并不是如此，比如Nexus 4就是768*1280。

这种情形下，不同的映射方式会有不同的效果：

仔细思考就会发现问题的本质是： 控件宽高计算基准是不同的 。

这让我想起ios开发中，其界面设计系统AutoLayout，就采用了一个计算公式：

也就是说，任何控件都可以以其他控件的属性值来定义自身的属性值，所以其可塑性非常高。不过实际应用中也会带来一个问题，就是太灵活，导致多重约束，有时候会彼此冲突。

仔细想想，最常见的视角参数应该就只有3个：

透过这3个参数，应该可以定义任意控件的属性值。

现在问题来了，Android怎么做到呢？答案是：**** android-percent-support-extend ****

对于值可以取：10%w , 10%h , 10% , 10%sw , 10%sh，缩写含义为

对于一开始的界面，最后xml文件为：

效果如下：

这种直接裸写百分比的方式比价繁琐，相较之下，目前采用 px映射表 的方案中写的px值直接在UI设计图中取就行，更加简单。
　　其实px映射表方案也就是百分比的方案，而且x值和y值已经分开，所以也可以解决正方形变形的问题。
　　目前需要客服的问题主要在于px映射为px，导致如果没有覆盖到设备的分辨率，就会出现问题，改成px映射为dp后，这种问题应该会减少很多。

Panda
2016-11-29

我的手机管家（11） 网络助手 界面设计及适配器

我的手机管家（11）   网络助手  界面设计

使用一个 <SlidingDrawer>标签用来布局一个抽屉样式

两个属性要注意： 一个是内容布局id,   手柄id 

 

  android:content="@+id/content"
  android:handle="@+id/handle"

 

 

 android:orientation="vertical"   抽出的方向

 

 

 <SlidingDrawer
        android:id="@+id/drawer"
        android:layout_width="match_parent"
        android:layout_height="200dp"
    android:content="@+id/content"
    android:handle="@+id/handle"
        android:orientation="vertical" >

 

 

 

 

<?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:orientation="vertical" >

    <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <TableRow>

            <TextView
                android:layout_column="1"
                android:padding="3dip"
                android:text="2G/3G总流量" />

            <TextView
                android:layout_gravity="right"
                android:gravity="right"
                android:padding="3dip"
                android:text="wifi总流量" />
        </TableRow>

        <View
            android:layout_height="2dip"
            android:background="#FF909090" />

        <TableRow>

            <TextView
                android:id="@+id/gprs"
                android:layout_column="1"
                android:padding="3dip" />

            <TextView
                android:id="@+id/wifi"
                android:layout_gravity="right"
                android:gravity="right"
                android:padding="3dip"
                android:text="" />
        </TableRow>

        <View
            android:layout_height="2dip"
            android:background="#FF909090" />
    </TableLayout>

    <SlidingDrawer
        android:id="@+id/drawer"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:content="@+id/content"
        android:handle="@+id/handle"
        android:orientation="vertical" >

        <ImageView
            android:id="@id/handle"
            android:layout_width="88dip"
            android:layout_height="44dip"
            android:src="@drawable/detail" />

        <LinearLayout
            android:id="@id/content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:padding="8dip"
                    android:text="图标" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:padding="12dip"
                    android:text="名称" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:padding="15dip"
                    android:text="上传" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:padding="15dip"
                    android:text="下载" />
            </LinearLayout>

            <ListView
                android:id="@+id/nt_lv_content"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:fastScrollEnabled="true" />
        </LinearLayout>
    </SlidingDrawer>

</LinearLayout>

 

效果图：

展示数据使用的是ListView  就会有item布局
头标   应用名称    上传数据    下载数据  

<?xml version="1.0" encoding="utf-8"?>    
<LinearLayout    
         xmlns:android="http://schemas.android.com/apk/res/android"     
         android:layout_height="wrap_content"     
         android:orientation="horizontal"
         android:paddingBottom="4dip" android:layout_width="fill_parent">    
         <ImageView     
                 
               android:id="@+id/ItemImage"   
               android:layout_height="48px"     
               android:layout_width="48px"   
               android:padding="6dip"  
         />    
         <TextView     
               android:layout_width="105px"     
               android:layout_height="wrap_content"     
               android:id="@+id/ItemText"
               android:padding="6dip">    
         </TextView>    
                  <TextView     
               android:layout_width="105px"     
               android:layout_height="wrap_content"     
               android:id="@+id/ItemText01"
               android:padding="6dip">    
         </TextView>   
                           <TextView     
               android:layout_width="105px"     
               android:layout_height="wrap_content"     
               android:id="@+id/ItemText02"
               android:padding="6dip">    
         </TextView>   
</LinearLayout>   

适配器： 

package com.chb.myphonesave.adapter;

import java.util.ArrayList;

import android.content.Context;
import android.content.pm.ResolveInfo;
import android.net.TrafficStats;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.chb.myphonesave.R;
import com.chb.myphonesave.util.TrafficDataUtil;

public  class MyNetworkAdapter extends BaseAdapter{

    private  LayoutInflater inflater;
    private ArrayList<ResolveInfo> lists;
    private Context context;
    public MyNetworkAdapter(Context context,ArrayList<ResolveInfo> _lists){
        this.context = context;
        inflater = LayoutInflater.from(context);
        this.lists = _lists;
    }

    public int getCount() {
        return lists.size();
    }


    public Object getItem(int position) {
        return lists.get(position);
    }


    public long getItemId(int position) {
        return position;
    }


    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder = null;
        if(null == convertView){
            convertView = inflater.inflate(R.layout.network_helper_item, null);
            holder = new ViewHolder();
            holder.iv = (ImageView) convertView.findViewById(R.id.ItemImage);
            holder.tv1 = (TextView) convertView.findViewById(R.id.ItemText);
            holder.tv2 = (TextView) convertView.findViewById(R.id.ItemText01);
            holder.tv3 = (TextView) convertView.findViewById(R.id.ItemText02);
            convertView.setTag(holder);
        }else {
            holder = (ViewHolder) convertView.getTag();
        }
        final ResolveInfo info = lists.get(position);
        holder.iv.setImageDrawable(info.loadIcon(context.getPackageManager()));
        holder.tv1.setText(info.loadLabel(context.getPackageManager()));
        final long totalTx = TrafficStats.getUidTxBytes(
　　　　　　　　　　　　info.activityInfo.applicationInfo.uid);
    final long totalRx = TrafficStats.getUidRxBytes(
　　　　　　　　　　　　info.activityInfo.applicationInfo.uid);
        holder.tv2.setText(TrafficDataUtil.getTrafficData(totalTx));
        holder.tv3.setText(TrafficDataUtil.getTrafficData(totalRx));
        return convertView;
    }
    class ViewHolder{
        ImageView iv;
        TextView tv1;
        TextView tv2;
        TextView tv3;
        TextView tv4;
    } 
}