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

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

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

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

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

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

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

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

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

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

下面上代码：

item布局：

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

二、实现上下菜单

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

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

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

顶端布局：

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

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

那么剩下的就是使用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;}}

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！