Android平板兼容

1.布局兼容
res文件夹下新建layout-large文件夹(7寸)或者layout-xlarge文件夹(大于7寸),里面的布局文件和layout文件夹的一样.例如activity_main.xml.
假设pad在layout-large和layout-xlarge的布局是这样的:

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:orientation="horizontal"
    tools:context="mchenys.net.csdn.blog.cys_phone_pad.MainActivity">

    <FrameLayout
        android:id="@+id/layout_left"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>

    <FrameLayout
        android:id="@+id/layout_right"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2"/>
</LinearLayout>

phone的布局是这样的:

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="mchenys.net.csdn.blog.cys_phone_pad.MainActivity">

    <FrameLayout
        android:id="@+id/fl_root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

注意:layout-large和layout-xlarge的方式有时候不太精确,有时5寸的屏幕也被识别成大屏幕了,怎么解决呢?
可以通过创建layout-sw600dp文件夹来规定屏幕最小宽度必须要大于600dp才能被识别为大屏幕的布局.
如下图所示:
这里写图片描述

2.代码兼容
通常pad的布局都是有多个FrameLayout或者Fragment的.并且FrameLayout大多数都是用来充当展示Fragment的容器用的.
那么在FragmentActivity的子类中如何才能根据当前的是Pad还是Phone来展示layout下的布局还是layout-large/layout-xlarge下的布局呢?
以上面的布局来说,假设我能获取到id为layout_left或者layout_right的view,不就说明当前的设备是大屏幕设备了吗.因为系统会根据当前设备的尺寸加载不同layout下的布局.
代码如下:

public class MainActivity extends AppCompatActivity {

    SettingListFragment listFragment = new SettingListFragment();
    SettingDetailFragment detailFragment = new SettingDetailFragment();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        if (findViewById(R.id.layout_left) != null) {
            //说明加载的是layout-large/layout-xlarge的布局
            ft.replace(R.id.layout_left, listFragment);//列表
            ft.replace(R.id.layout_right, detailFragment);//详情
        } else {
            //说明加载的是layout下的布局
            ft.replace(R.id.fl_root, listFragment);//列表
        }
        ft.commitAllowingStateLoss();
    }
    ...
}

对于大屏幕来说,如何实现点击左侧列表的内容切换展示右侧的详情fragment呢?
而对于手机来说,点击了列表内容就是要进入到下级页面的,这时又该如何区别对待呢?
还是采用上面的思路,看代码:

/**
 * 提供给列表fragment调用,切换展示详情fragment
 * @param args 把需要传的参数通过bundle传递
 */
public void showNextPage(Bundle args) {
    FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
    detailFragment.setArguments(args);
    if (findViewById(R.id.layout_left) != null) {
        //说明加载的是layout-large/layout-xlarge的布局,显示右侧布局
       detailFragment.updateUI(args);
    } else {
        //说明加载的是layout下的布局,直接进入详情页面
        ft.replace(R.id.fl_root, detailFragment);
        ft.addToBackStack(null);
    }
    ft.commitAllowingStateLoss();
}

最后看看列表fragment和详情fragment代码:

/**
 * 列表页面
 * Created by mChenys on 2017/4/8.
 */
public class SettingListFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_setting_list, container, false);
    }

    public void switchPage(View view) {
        MainActivity activity = (MainActivity) getActivity();
        Bundle args = new Bundle();
        args.putString("desc", "列表点击切换详情页啦......");
        activity.showNextPage(args);
    }
}

/**
 * 列表详情页面
 * Created by mChenys on 2017/4/8.
 */
public class SettingDetailFragment extends Fragment {
    private TextView mTextView;

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_setting_detail, container, false);
        mTextView = (TextView) view.findViewById(R.id.tv_info);
        updateUI(getArguments());
        return view;
    }

    /**
     * 更新界面
     * @param args
     */
    public void updateUI(Bundle args) {
        if (null != args) {
            String detail = args.getString("desc");
            mTextView.setText(detail);
        }
    }
}

猜你喜欢