Слияние кода завершено, страница обновится автоматически
Библиотека имитирует разбиение на страницы товарных деталей на таких платформах, как Taobao, JD и Kole. Она может быть встроена в RecyclerView, WebView, ViewPager, ScrollView и другие компоненты.
Адрес проекта: https://github.com/yangchong211/YCShopDetailLayout
Рисунок slide.gif (https://upload-images.jianshu.io/upload_images/4432347-43e7e30096b6e322.gif?imageMogr2/auto-orient/strip)
Рисунки: — Рисунок image (https://upload-images.jianshu.io/upload_images/4432347-cae4a780c2c0a988.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) — Рисунок image (https://upload-images.jianshu.io/upload_images/4432347-d4f966b7750d1ece.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) — Рисунок image (https://upload-images.jianshu.io/upload_images/4432347-f7a0e3647aad672e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
implementation 'cn.yc:YCSlideLib:1.1.2'
SlideDetailsLayout имеет два дочерних элемента ChildView: один — это макет товарной страницы, другой — макет страницы с деталями. В макете:
<com.ycbjie.slide.SlideLayout
android:id="@+id/slideDetailsLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:default_panel="front"
app:duration="200"
app:percent="0.1">
<!--Макет товарной страницы-->
<FrameLayout
android:id="@+id/fl_shop_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<!--Макет страницы с подробностями WebView-->
<include layout="@layout/include_shop_detail"/>
</com.ycbjie.slide.SlideLayout>
В коде:
mSlideDetailsLayout.setOnSlideDetailsListener(new SlideLayout.OnSlideDetailsListener() {
@Override
public void onStatusChanged(SlideLayout.Status status) {
if (status == SlideLayout.Status.OPEN) {
//Текущая страница — страница с деталями
Log.e("FirstActivity","Прокрутка назад к товарной странице");
} else {
//Текущая страница — товарная страница
Log.e("FirstActivity","Продолжайте прокручивать вверх, чтобы просмотреть страницу с деталями");
}
}
});
//Закрытие страницы с деталями
mSlideDetailsLayout.smoothClose(true);
//Открытие страницы с деталями
mSlideDetailsLayout.smoothOpen(true);
SlideAnimLayout имеет три дочерних элемента ChildView: один — это макет товарной страницы, второй — макет анимации прокрутки, третий — макет страницы с деталями. В макете:
<com.ycbjie.slide.SlideAnimLayout
android:id="@+id/slideDetailsLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:default_panel="front"
app:duration="200"
app:percent="0.1">
<!--Макет товарной страницы-->
<FrameLayout
android:id="@+id/fl_shop_main2"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!--Макет анимации прокрутки-->
<LinearLayout
android:id="@+id/ll_page_more"
android:orientation="vertical"
android:background="@color/colorAccent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/iv_more_img"
android:layout_width="40dp"
android:layout_height="40dp"
android:rotation="180"
android:layout_gravity="center_horizontal"
android:src="@mipmap/icon_details_page_down_loading" />
<TextView
android:id="@+id/tv_more_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="25dp"
android:gravity="center"
android:text="Тестовая анимация, продолжайте прокручивать вверх, чтобы увидеть страницу с деталями"
android:textSize="13sp" />
``` **setOnSlideStatusListener(null);**
**if (animator!=null){**
**animator.cancel();**
**animator = null;**
**}**
Конкретная логика реализуется в методе dispatchTouchEvent, который распределяет события. Когда пользователь прокручивает до самого верха или низа, событие напрямую передаётся родительскому View. В противном случае событие возвращается к родительскому узлу View.
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = ev.getX();
downY = ev.getY();
// Если прокрутить до конца, разрешить дальнейшую прокрутку для загрузки следующей страницы, иначе запретить
// Если дочерний узел не хочет, чтобы родительский процесс перехватывал события касания, то true.
getParent().requestDisallowInterceptTouchEvent(true);
break;
case MotionEvent.ACTION_MOVE:
float dx = ev.getX() - downX;
float dy = ev.getY() - downY;
boolean allowParentTouchEvent;
if (Math.abs(dy) > Math.abs(dx)) {
if (dy > 0) {
// Находясь вверху, прокручиваем вниз, позволяя родительскому View потреблять события
allowParentTouchEvent = isTop();
} else {
// находясь внизу, прокручиваем вверх, позволяя родительскому View потреблять события
allowParentTouchEvent = isBottom();
}
} else {
// Прокручиваем по горизонтали
allowParentTouchEvent = true;
}
getParent().requestDisallowInterceptTouchEvent(!allowParentTouchEvent);
break;
default:
break;
}
return super.dispatchTouchEvent(ev);
}
SlideAnimLayout имеет три дочерних элемента ChildView: один — это макет страницы товара, другой — макет анимации подъёма, а третий — макет страницы сведений. После перехвата событий в onInterceptTouchEvent дальнейшая обработка информации о касании позволяет реализовать вертикальное скольжение. Когда ScrollView страницы товара прокручивается до низа, событие непосредственно передаётся родительскому элементу SlideAnimLayout. В onInterceptTouchEvent, если страница сведений открыта (то есть состояние CLOSE), и пользователь тянет вниз, и абсолютное значение смещения y больше, чем смещение пикселя движения касания, и смещение y больше 0, событие перехватывается. В onInterceptTouchEvent, когда страница сведений закрыта (то есть в состоянии OPEN), и пользователь тянет вверх, и абсолютное значение смещения y больше, чем смещение пикселя движения касания, и смещение y меньше 0, событие перехватывается. При нахождении на странице товара пользователь тянет вверх; или при нахождении на странице сведений пользователь тянет вниз, изменяя значение mSlideOffset во время процесса вытягивания и вызывая метод requestLayout() для рисования. Для скольжения двух панелей в области экрана нужно только изменить смещение двух панелей по оси y (с положительным и отрицательным направлением). Шкала скольжения — это перемещение компонента относительно Top, и все вычисления смещения основаны на этой шкале. При переключении панелей нужно знать только соответствующее значение offset. Как обработать эффект анимации при подъёме: Добавить слушателя, который может отслеживать состояние и определять, достигнута ли половина расстояния. Основной метод сравнения — с offset. Когда достигается половина расстояния, можно использовать атрибут анимации для поворота вида стрелки на 180 градусов для достижения цели. Поскольку необходимо отслеживать расстояние скольжения, сначала необходимо получить высоту загружаемого компонента animHeight. Где лучше всего получить его? Можно использовать метод post для получения высоты компонента в методе onFinishInflate(). Как сделать скольжение эффективным и визуально связанным: Два важных этапа в пользовательском макете — это onMeasure (измерение) и onLayout (макет). Измерение определяет размер View, макет определяет положение View. Реализация скольжения заключается в вычислении информации о расположении на основе информации о скольжении, полученной через onInterceptTouchEvent и onTouchEvent в методе onLayout, и установке этой информации о положении на дочерний элемент View. Что делать после отпускания пальца после скольжения: То есть, находясь на странице товара, пользователь тянет вверх. После того, как смещение превышает половину, отпустите палец, и компонент сразу перейдёт на следующую страницу сведений. Основная логика заключается в методе finishTouchEvent, который в основном записывает значение смещения, состояние закрытия или открытия представления и произошло ли изменение переключения. Наконец, запустите анимацию. Во время анимации добавьте прослушиватель обновления анимации и вызовите метод requestLayout () для компонента. Таким образом, достигается эффект скольжения. После завершения анимации, если состояние открыто и это первый раз, когда отображается представление, установите видимость компонента сведений. Как сделать эффект скольжения более естественным или как настроить продолжительность скольжения: Можно настроить время самостоятельно, установив его непосредственно в макете.
Спасибо за открытый исходный код следующих примеров: https://github.com/jeasonlzy/VerticalSlideView https://github.com/hexianqiao3755/GoodsInfoPage https://github.com/cnbleu/SlideDetailsLayout
Мой личный сайт: www.yczbj.org, www.ycbjie.cn Github: https://github.com/yangchong211 Zhihu: https://www.zhihu.com/people/yczbj/activities Jianshu: http://www.jianshu.com/u/b7b2c6ed9284 CSDN: http://my.csdn.net/m0_37700275 Слушайте книги XimaLaya: http://www.ximalaya.com/zhubo/71989305/ Open Source China: https://my.oschina.net/zbj1618/blog Дни, проведённые в Интернете: http://www.jcodecraeer.com/member/content_list.php?channelid=1 Электронная почта: yangchong211@163.com Блог Alibaba Cloud: https://yq.aliyun.com/users/article?spm=5176.100-239.headeruserinfo.3.dT4bcV Заголовок сегмента: https://segmentfault.com/u/xiangjianyu/articles Золото: https://juejin.im/user/5939433efe88c2006afa0c6e
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )