Android屏幕适配解决方案

众所周知，我们编写的程序要在不同的设备中运行，使客户有完美的体验效果，就需要对不同分辨率的设备作不同的是配方案，接下来以手机和平板为例进行是配方案，以新闻客户端中新闻阅读为例

（1）编写再手机和平板中的不同布局文件

手机布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/id_title_fragment"
        android:layout_width="match_parent"

        android:name="com.chenbaige.screensetdemo.fragment.TitleFragment"
        android:layout_height="match_parent">

    </fragment>


</RelativeLayout>

平板布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

   <fragment
       android:id="@+id/id_title_fragment"
       android:layout_width="0dp"
       android:layout_weight="2"
       android:name="com.chenbaige.screensetdemo.fragment.TitleFragment"
       android:layout_height="match_parent">

   </fragment>

    <fragment
        android:id="@+id/id_content_fragment"
        android:name="com.chenbaige.screensetdemo.fragment.WelFragment"
        android:layout_width="0dp"
        android:layout_weight="3"
        android:layout_height="match_parent"></fragment>


</LinearLayout>

（2）编写展示新闻标题列表的fragment，继承自ListFragment，便于展示列表

public class TitleFragment extends ListFragment {

    private List<String> Titles = new ArrayList<String>();
    private static ListViewSelectedListener mListener;

    public interface ListViewSelectedListener {
        public void selected(int positin);
    }

    public static void setOnItemSelectedListener(ListViewSelectedListener listener) {
        mListener = listener;
    }

    @Override
    public void onListItemClick(ListView l, View v, int position, long id) {
        mListener.selected(position);
    }


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        for (int i = 0; i < 30; i++) {
            Titles.add("新闻列表" + i);
        }
        setListAdapter(new BaseAdapter() {
            @Override
            public int getCount() {
                return Titles.size();
            }

            @Override
            public Object getItem(int position) {
                return Titles.get(position);
            }

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

            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                TextView tv=null;
                if(tv==null){
                    tv = new TextView(getActivity());
                }
                tv.setText(Titles.get(position));
                tv.setPadding(10, 10, 10, 10);
                tv.setTextSize(14);
                return tv;
            }
        });


    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = LayoutInflater.from(getActivity()).inflate(R.layout.title_fragment, null, false);
        return view;
    }
}

对应布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <ListView android:id="@id/android:list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:divider="@android:color/holo_red_light"
        android:dividerHeight="1dp"
        android:background="#00FFf0"
        />


</RelativeLayout>

（3）编写点击不同新闻标题，展示欣慰内容的fragment，为方便，点击不同标题的时候只显示一行不同的文字，因此布局中用一个textview填充

/**
 * Created by chenboge on 15/11/3.
 */
@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public class WelFragment extends Fragment {

    private static TextView tv;

    public interface onTextViewClicklistener {

    }


    public static void SetContentText(String content) {
        tv.setText(content);
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = LayoutInflater.from(getActivity()).inflate(R.layout.content_fragment, null, false);
        tv = (TextView) view.findViewById(R.id.id_content_tv);
        return view;
    }
对应布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/id_content_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="hahahahaha" />


</RelativeLayout>
（4）接下来编写程序启动时的activity，如果是手机布局，由于手机宽度有限，不便于展示内容，因此只显示新闻标题列表，点击不同新闻标题后进入内容展示的ativity。如果是平板布局，则采用左标题，右内容的形势展示，便于良好的体验效果

public class MainActivity extends Activity implements TitleFragment.ListViewSelectedListener {

    private boolean isTwoPanel;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
	//values文件夹下的layout.xml配置文件
        setContentView(R.layout.main);
        initData();
    }

    private void initData() {
	//从xml文件中获取当前是手机屏，或者平板屏幕，xml文件会在接下来展示
        isTwoPanel = getResources().getBoolean(R.bool.ScreenShow);
	//点击标题后的处理事件
        TitleFragment.setOnItemSelectedListener(this);

    }


    @Override
    public void selected(int positin) {
        String s = "这是第" + positin + "个新闻内容";

        if (isTwoPanel) {
	//平板模式，直接修改右侧内容区域内容
            WelFragment.SetContentText(s);
        } else {
	//手机屏，点击后跳转到内容显示界面
            Intent intent = new Intent(MainActivity.this, ShowContentActivity.class);
            intent.putExtra("content", s);
            startActivity(intent);
        }
    }
}
（5）接下来编写手机屏下点击新闻标题后跳转的activity，只用设置一下内布局的现实内容即可
public class ShowContentActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_show_content);
        WelFragment.SetContentText(getIntent().getStringExtra("content"));
    }


}
布局：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.chenbaige.screensetdemo.ShowContentActivity">

    <fragment
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:name="com.chenbaige.screensetdemo.fragment.WelFragment"
        android:id="@+id/id_content_fragment" />

</RelativeLayout>

（6）接下来是适配的重点了，建立不同的values文件夹，app启动的时候会根据自身机型情况读取不同values文件夹下的配置文件，因此我们在这里新建values－sw600dp文件夹，用于存放平板的配置文件，在每个values文件夹下建立layout.xml配置文件，具体如下

／values－sw600dp／layout.xml  设备最小宽度为600p的时候读区该配置文件

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
//R.layout.main就是读取的activity_main_twopanel布局文件

   <item name="main" type="layout">@layout/activity_main_twopanel</item>
    <!-- 判断是否是双面板-->
    <bool name="ScreenShow">true</bool>

</resources>
／values／layout.xml  默认读取的配置文件
<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
   <item name="main" type="layout">@layout/activity_main</item>
    <!-- 判断是否是双面板-->
    <bool name="ScreenShow">false</bool>

</resources>
这样就解决了不同设备间的是配问题了，达到完美的客户体验效果
手机设备下的程序运行效果图：


平板设备下的运行效果图：