漫吧漫画阅读界面的搭建（一）基础布局搭建（上）

想看第二篇的童鞋， 漫吧漫画阅读界面的搭建（一）基础布局搭建（下）

想看直接完整代码的童鞋，漫吧漫画阅读界面的搭建（一）基础布局搭建（完全代码）

先上界面的效果图：（图片质量有点差，这是因为质量好老是会超过大小限制，请谅解）

一、首先我们来实现基本的图片显示部分

这里想法是这样的，实现方式多样

1.可以通过ViewPager控件然后加载Fragment来实现。

2.可以通过RecyclerView或者ListView的item实现。

3.可以通过轮播控件来实现。当然还有其他的方式。

这里我使用的是第二种，通过RecyclerView的item来实现。

下面上代码：

item布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="0dp">
        <!--做出占位的字，图片加载出来后会被图片覆盖-->
        <TextView
            android:id="@+id/textView"
            android:background="@color/colorSliteGray"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textColor="@color/colorDimGray"
            android:text="1"
            android:textSize="80sp"
            android:gravity="center"/>
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitXY"
            android:layout_gravity="center"/>
    </RelativeLayout>
    <!--分隔线，让布局看起来更清晰，可以去掉-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:background="@color/colorSliteGray"
        android:layout_alignParentBottom="true"></LinearLayout>
</LinearLayout>

然后看看漫画查看界面的布局：

<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:background="@color/colorSliteGray"
             tools:context="winter.zxb.smilesb101.cartoon8.WatchComicActivity">
    <!-- The primary full-screen view. This can be replaced with whatever view
         is needed to present your content, e.g. VideoView, SurfaceView,
         TextureView, etc. -->
    <android.support.v7.widget.RecyclerView
        android:id="@+id/fullscreen_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"/>
</RelativeLayout>

这样就把图片显示的布局搭建好了，recyclerView的使用应该很简单美着里就不再赘述了。

二、实现上下菜单

这里我们通过TranslateAnimation配合布局的显示消失来实现消失和显示的动画

具体的这篇博客有描述控件显示与隐藏动画

那么第一步还是我们的界面，这里是接着前面的漫画主布局做的

顶端布局：

<!--顶部栏-->
    <LinearLayout
        android:id="@+id/top_layout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:background="#80000000"
        android:visibility="gone"
        android:translationZ="99dp">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="horizontal">
            <Button
                android:id="@+id/back_btn"
                android:layout_width="10dp"
                android:layout_height="20dp"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="15dp"
                android:background="@mipmap/arrow_left_better"/>
            <TextView
                android:id="@+id/comic_name"
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_gravity="center_vertical"
                android:gravity="center"
                android:layout_marginLeft="10dp"
                android:textColor="@color/colorWrite"/>
            <TextView
                android:id="@+id/comic_pic_state_top"
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_marginLeft="10dp"
                android:textColor="@color/colorWrite"
                android:layout_gravity="center_vertical"
                android:gravity="center"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_marginLeft="10dp">
            <Button
                android:id="@+id/show_menuBtn"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:background="@mipmap/info_72px"
                android:layout_marginRight="10dp"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="10dp"/>
            <Button
                android:id="@+id/feed_backBtn"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:background="@mipmap/edit_71"
                android:layout_marginRight="10dp"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="10dp"/>
            <Button
                android:id="@+id/downloadpic_Btn"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:background="@mipmap/download_46"
                android:layout_marginRight="10dp"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="10dp"/>
            <Button
                android:id="@+id/sharePicBtn"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:background="@mipmap/external_link_75"
                android:layout_marginRight="20dp"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="10dp"/>
        </LinearLayout>
    </LinearLayout>

底部布局（同样是与漫画主布局在一个文件内）：

    <!--底部栏-->
<LinearLayout
    android:id="@+id/bottom_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_alignParentBottom="true"
    android:background="#80000000"
    android:visibility="gone"
    android:translationZ="99dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="10dp">
        <TextView
            android:id="@+id/preHUA"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="@string/preHUA"
            android:textColor="@color/colorSliteGray"
            android:gravity="center"/>
        <SeekBar
            android:id="@+id/bottom_seekBar"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_weight="1"
            android:layout_gravity="center"/>
        <TextView
            android:id="@+id/nextHUA"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="@string/nextHUA"
            android:textColor="@color/colorSliteGray"
            android:gravity="center"/>
    </LinearLayout>
<!--底部菜单栏-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"        android:layout_marginBottom="10dp"
        android:orientation="horizontal"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp">
        <LinearLayout
        android:id="@+id/indexBtn"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/menu_expanded_109"
            android:layout_gravity="center"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:textColor="@color/colorSliteGray"
            android:text="@string/index"/>
    </LinearLayout>

        <LinearLayout
            android:id="@+id/download_comic_Btn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@mipmap/downloadbtn"
                android:layout_gravity="center"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_gravity="center"
                android:textColor="@color/colorSliteGray"
                android:text="@string/download"/>
        </LinearLayout>

        <LinearLayout
        android:id="@+id/light_btn"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/light_bulb_46"
            android:layout_gravity="center"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_gravity="center"
            android:textColor="@color/colorSliteGray"
            android:text="@string/light"/>
    </LinearLayout>

        <LinearLayout
            android:id="@+id/phone_switch"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@mipmap/phonestatus_switch"
                android:layout_gravity="center"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_gravity="center"
                android:textColor="@color/colorSliteGray"
                android:text="@string/landscape"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/options_btn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@mipmap/options_72"
                android:layout_gravity="center"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_gravity="center"
                android:textColor="@color/colorSliteGray"
                android:text="@string/options"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

看了上面的布局代码，是不是觉得布局内容太多了?我们一可以使用引入布局来实现，这个看个人习惯，当然我建议通过引入布局的方式来做，这样代码看起来不会那么辛苦，修改起来也更简单。

重点来了，我们需要动态的控制上下菜单布局的显示与隐藏。这里我们还需要一个接受用户点击的控件，来接收用户点击然后控制显示与影藏，这里可以看你喜好以及实际需求添加控件到合适位置。

我添加的布局是（注意这里应该添加到RecyclerView的布局以下，因为RecyclerView是全屏的，而我们的主容器又是相对布局，添加到之前的话会导致点击事件被RecyclerView拦截）：

<!--菜单按钮区域(实际作用区域)-->
    <LinearLayout
        android:id="@+id/menu_ctrl"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:visibility="visible">
        <!--上一张图片-->
        <TextView
            android:id="@+id/preHUAText"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
        </TextView>
        <!--显示或者隐藏状态栏的触发器-->
        <TextView
            android:id="@+id/toogle"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_centerInParent="true"></TextView>
        <!--下一张图片-->
        <TextView
            android:id="@+id/nextHUAText"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
        </TextView>
    </LinearLayout>

那么剩下的就是使用java代码进行相关控制了

直接上代码（很简单，主要是动画代码，前面我已经给出了相关博客，有问题可以去看看）：

         private LinearLayout toplayout;
         private LinearLayout bottomlayout;
         /**
	 * 动画时间
	 */
	private static final int UI_ANIMATION_DELAY = 200;
        /**
	 * 显示或者隐藏状态
	 */
	private boolean mVisible;	
        /**
	 * 展示上下栏
	 */
	void showPanel()
	{
		//Log.i(TAG,"hidePanel: 显示");
		TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0.0f,Animation.RELATIVE_TO_SELF,0.0f,Animation.RELATIVE_TO_SELF,1.0f,Animation.RELATIVE_TO_SELF,0.0f);
		TranslateAnimation translateAnimation1 = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f,
				Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
				-1.0f, Animation.RELATIVE_TO_SELF, 0.0f);
		translateAnimation.setDuration(UI_ANIMATION_DELAY);
		translateAnimation1.setDuration(UI_ANIMATION_DELAY);
		toplayout.setAnimation(translateAnimation1);
		bottomlayout.setAnimation(translateAnimation);
		toplayout.setVisibility(View.VISIBLE);//这里通过改变可见性来播放动画
		bottomlayout.setVisibility(View.VISIBLE);//这里通过改变可见性来播放动画
		//底部状态栏消失
		small_status.setVisibility(View.GONE);
		//隐藏上下操作板，防止与上下菜单冲突，注意只能是隐藏，不能GONE，否者会导致中间控制板占据所有屏幕的问题
		nextToogle.setVisibility(View.INVISIBLE);
		preToogle.setVisibility(View.INVISIBLE);
	}

	/**
	 * 隐藏上下栏
	 */
	void hidePanel()
	{
		//Log.i(TAG,"hidePanel: 隐藏");
		TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0.0f,
				Animation.RELATIVE_TO_SELF,0.0f,Animation.RELATIVE_TO_SELF,0.0f,Animation.RELATIVE_TO_SELF,-1.0f);
		TranslateAnimation translateAnimation1 = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f,
				Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
				0.0f, Animation.RELATIVE_TO_SELF, 1.0f);
		translateAnimation.setDuration(UI_ANIMATION_DELAY);
		translateAnimation1.setDuration(UI_ANIMATION_DELAY);
		toplayout.setAnimation(translateAnimation);
		bottomlayout.setAnimation(translateAnimation1);
		toplayout.setVisibility(View.INVISIBLE);//这里通过改变可见性来播放动画
		bottomlayout.setVisibility(View.INVISIBLE);//这里通过改变可见性来播放动画
		//底部状态栏显示
		small_status.setVisibility(View.VISIBLE);
		//显示上下操作板，防止与上下菜单冲突
		nextToogle.setVisibility(View.VISIBLE);
		preToogle.setVisibility(View.VISIBLE);
	}

	/**
	 * 触发器用来控制显示与隐藏
	 */
	void toogle()
	{
		if(mVisible)
		{
			hidePanel();
			mVisible = false;
		}
		else
		{
			showPanel();
			mVisible = true;
		}
	}

接下来就是设定按下监听，然后调用toogle()方法就可以实现上下菜单栏的显示隐藏了。

这篇先到这里，有兴趣的可以继续漫吧漫画阅读界面的搭建（一）基础布局搭建（下）