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

最新推荐文章于 2023-03-30 22:21:51 发布

NeverSettle101

最新推荐文章于 2023-03-30 22:21:51 发布

阅读量1.8k

点赞数

分类专栏： Android 实践 Android Android 漫吧（配合爬虫）App开发文章标签：漫画阅读漫吧界面

本文链接：https://blog.csdn.net/qq_21265915/article/details/62041321

版权

Android 同时被 3 个专栏收录

24 篇文章 1 订阅

订阅专栏

Android 实践

13 篇文章 0 订阅

订阅专栏

Android 漫吧（配合爬虫）App开发

3 篇文章 0 订阅

订阅专栏

如果想看效果的话，漫吧漫画阅读界面的搭建（一）基础布局搭建（上）

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

我们来接着上一篇文章，

三、实现右下角的小状态栏

先上布局代码：

<!--底部小的状态栏-->
    <LinearLayout
        android:id="@+id/small_status"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:background="@drawable/round_rect_pressed"
        android:orientation="horizontal">
        <TextView
            android:id="@+id/comic_name_bottom"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:textColor="@color/colorSliteGray"
            android:gravity="center"
            android:layout_marginLeft="2dp"
            android:maxLines="1"
            android:textSize="12sp"/>
        <TextView
            android:id="@+id/comic_pic_state"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textColor="@color/colorSliteGray"
            android:layout_marginLeft="10dp"
            android:maxLines="1"
            android:textSize="12sp"/>
        <TextView
            android:id="@+id/time"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textColor="@color/colorSliteGray"
            android:layout_marginLeft="10dp"
            android:maxLines="1"
            android:textSize="12sp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textColor="@color/colorSliteGray"
            android:text="@string/battery"
            android:layout_marginLeft="10dp"
            android:maxLines="1"
            android:textSize="12sp"/>
        <TextView
            android:id="@+id/battery"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:maxLines="1"
            android:textColor="@color/colorSliteGray"
            android:layout_marginRight="20dp"
            android:textSize="12sp"/>
    </LinearLayout>

然后再添上和前面布局相关联的代码就可以了，再加上相对应的按钮监听以及对应逻辑就可以了。

四、解决问题

我们这里有几个问题，

1.RecyclerView与SeekBar以及提示文字（也就是现在是第几张图/总共的图片）

首先获取RecyclerView的位置，获取RecyclerView的位置博文

贴上获取位置的代码

private RecyclerView.OnScrollListener scrollListener = new RecyclerView.OnScrollListener(){
		@Override
		public void onScrolled(RecyclerView recyclerView,int dx,int dy){
			super.onScrolled(recyclerView,dx,dy);
			LinearLayoutManager l = (LinearLayoutManager)recyclerView.getLayoutManager();
			//l.findFirstCompletelyVisibleItemPosition();
			//Log.i(TAG,"onScrolled: "+l.findFirstVisibleItemPosition());
			if((adapterNowPos-1)!=l.findFirstVisibleItemPosition()) {
				//不等于的时候才是有效改变
				adapterNowPos = l.findFirstVisibleItemPosition();
				allItems = l.getItemCount();
				//设置seekbar
				seekBar.setMax(allItems);
				seekBar.setProgress(adapterNowPos);
			}
		}
	};

SeekBar值的监听

/**
	 * seekBar值改变的监听
	 */
	SeekBar.OnSeekBarChangeListener seekChangerListener = new SeekBar.OnSeekBarChangeListener(){
		@Override
		public void onProgressChanged(SeekBar seekBar,int progress,boolean fromUser){
			Log.i(TAG,"onProgressChanged: 选择了，第"+progress);
			//设置图片状态（1/9）;
			if(progress!=0) {
				adapterNowPos = progress;
				String s = adapterNowPos + "/" + allItems;
				comic_pic_state.setText(s);//设置图片的数量
				pic_state_top.setText(s);
				scroolRV_To(adapterNowPos);
			}
		}

		@Override
		public void onStartTrackingTouch(SeekBar seekBar){

		}

		@Override
		public void onStopTrackingTouch(SeekBar seekBar){

		}
	};

滚动控制代码

/**
	 * 滚动到位置
	 * @param pos
	 */
	void scroolRV_To(int pos)
	{
		if(adapterNowPos>=allItems)
		{
			adapterNowPos = allItems;
			Toast.makeText(this,"已经到顶啦！",Toast.LENGTH_SHORT);
		}
		else if(adapterNowPos<=1)
		{
			adapterNowPos = 1;
			Toast.makeText(this,"已经到底啦！",Toast.LENGTH_SHORT);
		}
		mContentView.smoothScrollToPosition(adapterNowPos);
	}

这样，第一个问题就解决了。

2.上一张图片和下一张图片与上下菜单面板有点击事件冲突（上下点击事件被下一张下一张图片拦截）

在隐藏和显示面板的时候，把上一张图片和下一张图片隐藏了，注意不能是设置GONE属性，否者会导致中间的（也就是显示或者隐藏上下菜单的控件全屏化）。

3.控制面板和RecyclerView的滑动冲突处理

这里由于我们的控制面板（也就是上一张图下一张图，以及上下菜单的控制面板）与RecyclerView的滑动有冲突，后者滑动事件被前者所拦截。

解决方法：

重写控制面板的OnTouch方法，在move中进行事件分发。

下面上代码：

private float Sy = 0,Ey = 0;//放在外面是为了更新sy的值，让滑动更加顺滑
	/**
	 * 控制板的触摸事件监听，用来处理滑动冲突（控制面板与recyclerView的滑动冲突）
	 */
	View.OnTouchListener ctrl_touchlistenner = new View.OnTouchListener(){
		@Override
		public boolean onTouch(View v,MotionEvent event){
			switch(event.getAction())
			{
				case MotionEvent.ACTION_DOWN:
					Sy = event.getY();
					//Log.i(TAG,"onTouch: 按下事件 "+Sy);
				break;
				case MotionEvent.ACTION_MOVE:
					Ey = event.getY();
					float res = (Ey-Sy);
					if(Math.abs(res) > 10)
					{
						//Log.i(TAG,"onTouch: 分发事件给recyclerView 移动距离为 "+res);
						//让RecyclerView开始滑动
						mContentView.scrollBy(mContentView.getScrollX(),mContentView.getScrollY()-(int)res);
						Sy = event.getY();//更新开始位置
					}
					break;
			}
			return false;
		}
	};

这样滑动冲突就解决了。

4.SeekBar与RecyclerView的联动BUG

直接拖动SeekBar然后更新RecyclerView的话，会导致SeekBar和RecyclerView都自带鬼畜效果。

问题所在：在SeekBar中更新RecyclerView的时候不能让RecyclerView平稳滑动，这样的话会导致RecyclerView的onScrollListener被多次触发，而我们在onScrollListener中又更新了SeekBar，这样就导致了鬼畜的出现。

解决方式：不实时更新，只在离开Seekbar的时候更新，实时更新一个文本来作为用户提示，用于辅助用户操作。

下面贴上代码：

辅助布局代码：

 <!--SeekBar的操作提示栏,默认不可见，按下SeekBar可见，抬起不可见-->
    <RelativeLayout
        android:id="@+id/bottom_seekBar_help"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_above="@+id/bottom_layout"
        android:layout_marginBottom="10dp"
        android:background="#80000000"
        android:visibility="gone">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_centerInParent="true">
            <TextView
                android:id="@+id/seekBar_help_now"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center"
                android:layout_gravity="center"
                android:textColor="@color/colorAqua"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center"
                android:layout_gravity="center"
                android:text=" / "
                android:textColor="@color/colorSliteGray"/>
            <TextView
                android:id="@+id/seekBar_help_num"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:gravity="center"
                android:textColor="@color/colorSliteGray"/>
        </LinearLayout>

    </RelativeLayout>

java代码：

        private RecyclerView.OnScrollListener scrollListener = new RecyclerView.OnScrollListener(){
		@Override
		public void onScrolled(RecyclerView recyclerView,int dx,int dy){
			super.onScrolled(recyclerView,dx,dy);
			LinearLayoutManager l = (LinearLayoutManager)recyclerView.getLayoutManager();
			adapterNowPos = l.findFirstVisibleItemPosition();
			allItems = l.getItemCount();
			//设置seekbar
			seekBar.setMax(allItems-1);
			Log.i(TAG,"onScrolled: "+allItems);
			seekBar.setProgress(adapterNowPos);
			setpicText();//设置文字
		}
	};

        /**
	 * seekBar值改变的监听
	 */
	SeekBar.OnSeekBarChangeListener seekChangerListener = new SeekBar.OnSeekBarChangeListener(){
		@Override
		public void onProgressChanged(SeekBar seekBar,int progress,boolean fromUser){
			//更新辅助面板
			if(bottom_seekBar_help.getVisibility()==View.VISIBLE) {
				seekBar_help_now.setText(progress + 1+"");
			}
		}

		@Override
		public void onStartTrackingTouch(SeekBar seekBar){
            //显示辅助面板
			bottom_seekBar_help.setVisibility(View.VISIBLE);
			seekBar_help_num.setText(seekBar.getMax()+1+"");//设置总数
		}

		@Override
		public void onStopTrackingTouch(SeekBar seekBar){
			//关闭辅助面板
			bottom_seekBar_help.setVisibility(View.GONE);
			int progress = seekBar.getProgress();
			Log.i(TAG,"onProgressChanged: 选择了，第"+progress);
			//设置图片状态（1/9）;
			adapterNowPos = progress;
			setpicText();
			mContentView.scrollToPosition(adapterNowPos);//不能平稳滑动，否者联动出错
		}
	};

	/**
	 * 设置图片文字（第几张/总共几张）
	 */
	void setpicText()
	{
		String s = adapterNowPos+1+ "/" + allItems;
		comic_pic_state.setText(s);//设置图片的数量
		pic_state_top.setText(s);
	}

这样就完美解决了问题。

这个界面就基本完成！