安卓

iOS转android之全面屏适配

2019-01-11  本文已影响1人  移动端_小刚哥

一、首先设置Android主题

在AndroidManifest.xml文件中添加

    <!--
        1、android:usesCleartextTraffic="true"支持http请求 跟iOS一样😄
        2、Theme.AppCompat主题是兼容主题,意思就是说如果运行程序的手机API是21则就相当于是Material主题,
           如果运行程序的手机API是11则就相当于是Holo主题,以此类推
    -->
    <application
       //其他配置信息
        android:theme="@style/AppTheme"
    </application>

在styles.xml文件中添加

<resources>
    <!--
        colorPrimaryDark 状态栏颜色
        colorAccent 控制各个控件被选中的颜色
        android:windowBackground 页面背景色
        android:navigationBarColor 底部导航栏颜色
        android:colorPrimary Appbar背景色
        android:textColorPrimary ToolBar上的Title颜色
        android:colorControlNormal 各个控制控件的默认颜色
    -->

    <!-- Base application theme. DarkActionBar是有导航栏的 NoActionBar是没有导航栏的-->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowLightStatusBar">true</item>
    </style>

</resources>

可以看到我们选择了没有NavigationBar导航栏,不是说这样设置很好,而是因为Android系统的导航栏我目前驾驭不了😂,我自己创建可控性就好多了。

二、实现NavigationBar导航栏和StatusBar状态栏融为一体效果

先看两种效果

效果一 效果二

效果一的StatusBar没有和NavigationBar融为一体,在目前主流刘海屏的手机上是很扎眼的,看起来不是很协调,效果二就顺眼了很多(个人观点)

那么作为一个iOS刚过来的初学者怎么实现这种效果呢?首先在BaseActivity的布局文件顶部添加一个View,在这个View上添加StatusBar和NavigationBar,我们可以将NavigationBar的高度确定,但是各种手机的StatusBar高度不确定,所以这里我们将这个父View的高度设置为0,在BaseActivity.java代码中获取StatusBar高度之后更新父View的高度。

<!--填充状态栏背景部分 默认和navigationbar连为一体 所以设置为透明色-->
<View
    android:id="@+id/navigationBarTopClearView"
    android:layout_width="match_parent"
    android:layout_height="20dp"
    android:background="#00000000"
    />


<!--layout_marginTop的值设置为和statusBar高度一致 默认为20dp-->
<RelativeLayout
    android:id="@+id/navigationBar"
    android:layout_width="match_parent"
    android:layout_height="58dp"
    android:layout_below="@+id/navigationBarTopClearView"
    android:layout_above="@+id/nav_bottom_line"
    android:background="#00000000"
    >

    <!--标题-->
    <TextView
        android:id="@+id/nav_text_title"
        android:text="标题"
        android:textSize="18dp"
        android:textColor="#fff"
        android:gravity="center"
        android:singleLine="true"
        android:ellipsize="marquee"
        android:layout_width="100dp"
        android:layout_centerInParent="true"
        android:layout_height="wrap_content" />

    <!--返回按钮-->
    <Button
        android:id="@+id/button_backward"
        android:layout_width="70dp"
        android:layout_height="match_parent"
        android:drawableLeft="@mipmap/tm_nav_back"
        android:drawablePadding="6dp"
        android:layout_marginLeft="15dp"
        android:background="#00000000"
        android:ellipsize="end"
        android:gravity="center"
        android:onClick="onClick"
        android:paddingLeft="5dp"
        android:singleLine="true"
        android:text=""
        android:textColor="#ffffff"
        android:textSize="15dp"
        android:visibility="invisible" />

    <!--右侧按钮-->
    <Button
        android:id="@+id/button_forward"
        android:layout_width="70dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:drawablePadding="6dp"
        android:background="#00000000"
        android:ellipsize="end"
        android:gravity="center"
        android:onClick="onClick"
        android:paddingLeft="5dp"
        android:singleLine="true"
        android:text="搜索"
        android:textColor="#ffffffff"
        android:textSize="15dp"
        android:visibility="invisible" />
</RelativeLayout>

<!--导航栏底部分割线-->
<View
    android:id="@+id/nav_bottom_line"
    android:layout_height="1px"
    android:layout_width="match_parent"
    android:layout_alignParentBottom="true"
    android:background="#C7C7C7"/>

BaseActivity.java


    @Override
    protected void onCreate( Bundle savedInstanceState ) {
        super.onCreate(savedInstanceState);
        
      //整个navigationBar和statusBar的背景视图
        navBackViewLayout = (RelativeLayout)findViewById(R.id.navigationBarBackView);
        //填充statusbar背景的view 设置为透明色
        statusBarBackView = (View)findViewById(R.id.navigationBarTopClearView);

        initStatusBar();
    }




    /**
     * 根据实际情况适配navigationBar
     */
    private void initStatusBar(){
        //让布局扩展到statusbar后面
        View decorView  = getWindow().getDecorView();
        decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);


        //根据实际设备动态修改statusbar背景填充区域高度,使得navigationbar能正确显示
        Class c = null;
        int statusBarHeight = 0;
        try {
            c = Class.forName("com.android.internal.R$dimen");
            Object obj = c.newInstance();
            Field field = c.getField("status_bar_height");
            int x = Integer.parseInt(field.get(obj).toString());
            statusBarHeight = this.getResources().getDimensionPixelSize(x);
            Log.d("状态栏绝对高度为(单位px)", String.valueOf(statusBarHeight));

        } catch (Exception e) {
            e.printStackTrace();
            statusBarHeight = 20;
        }

        //设置状态栏背景填充高度
        ViewGroup.LayoutParams layoutParams = statusBarBackView.getLayoutParams();
        layoutParams.height = statusBarHeight;
        statusBarBackView.setLayoutParams(layoutParams);

        ViewGroup.LayoutParams navLayoutPara = navBackViewLayout.getLayoutParams();
        navLayoutPara.height = navLayout.getLayoutParams().height + statusBarHeight + navSepLine.getLayoutParams().height;
        navBackViewLayout.setLayoutParams(navLayoutPara);
    }

上一篇下一篇

猜你喜欢

热点阅读