미 단 평 가 를 모방 한 안 드 로 이 드 애플 리 케 이 션 의 가격 과 구 매 표시 줄 부상 고정 효과
위의 그림(2)에서 보 듯 이 바로 구 매 구 매 구 조 를 위로 미 끄 러 뜨리 고 네 비게 이 션 바 의 구조 로 미 끄 러 질 때 바로 구 매 구 매 구 조 는 네 비게 이 션 바 의 구조 아래 에 붙 어 있 고 아래 의 다른 구 조 는 미 끄 러 질 수 있다.우리 가 아래로 미 끄 러 질 때 바로 구 매 구 매 구 조 는 아래로 미 끄 러 졌 다.약간 복잡 해 보이 지만 생각 을 말 하 자 갑자기 깨 달 았 을 것 이다.
우리 가 위로 미 끄 러 지 는 과정 에서 우 리 는 즉시 구 매 하 는 구조 가 네 비게 이 션 바 구조 아래로 미 끄 러 지 는 지 판단 한다.만약 에 바로 구 매 하 는 위 에 네 비게 이 션 바 에 올 라 가면 우 리 는 즉시 구 매 하 는 부상 상 자 를 새로 만들어 네 비게 이 션 바 아래 에 표시 한다.그러면 바로 구 매 하 는 것 이 네 비게 이 션 바 아래 에 붙 이 는 효 과 를 실현 할 수 있다.그리고 우리 가 아래로 미 끄 러 질 때즉시 사재 기 구조의 아래 가 방금 새로 지은 즉시 사재 기 부상 틀 의 아래 에 도 착 했 을 때 우 리 는 즉시 사재 기 부상 틀 을 제거 하고 말 하기 가 좀 어 려 울 수 있 습 니 다.생각 을 알 았 으 니 다음 에 우 리 는 효 과 를 실현 하 겠 습 니 다.
안 드 로 이 드 프로젝트 를 새로 만 들 고 이름 을 MeiTuanDemo 로 지 었 습 니 다.먼저 보고 바로 사재 기(buylayot.xml)의 레이아웃 입 니 다.여 기 는 제 가 편 의 를 위해 미 단 위 에서 그림 을 직접 캡 처 했 습 니 다.
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="@+id/buy_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/buy" />
</LinearLayout>
바로 구 매 하 는 구조 가 실현 되 었 습 니 다.그 다음 에 메 인 인터페이스의 구 조 를 실현 합 니 다.그 위 에 네 비게 이 션 표시 줄 의 구 조 를 실 현 했 습 니 다.편리 함 을 위해 미국 단체 에서 캡 처 한 그림 을 직접 캡 처 한 다음 에 아래 의 ViewPager 구 조 를 통 해 바로 구 매 구 매 구 조 를 실 현 했 습 니 다.다른 구 조 는 ScrollView 안에 놓 았 습 니 다.화면 은 간단 합 니 다
<LinearLayout 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:orientation="vertical" >
<ImageView
android:id="@+id/imageView1"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="45dip"
android:src="@drawable/navigation_bar" />
<com.example.meituandemo.MyScrollView
android:id="@+id/scrollView"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="@+id/iamge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/pic"
android:scaleType="centerCrop" />
<include
android:id="@+id/buy"
layout="@layout/buy_layout" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/one"
android:scaleType="centerCrop" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/one"
android:scaleType="centerCrop" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/one"
android:scaleType="centerCrop" />
</LinearLayout>
</com.example.meituandemo.MyScrollView>
</LinearLayout>
위의 메 인 화면 레이아웃 에서 스크롤 뷰 가 아니 라 사용자 정의 MyScrollView 를 발견 할 수 있 습 니 다.다음은 MyScrollView 클래스 의 코드 를 보 겠 습 니 다.
package com.example.meituandemo;
import android.content.Context;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ScrollView;
/**
* :http://blog.csdn.net/xiaanming
*
* @author xiaanming
*
*/
public class MyScrollView extends ScrollView {
private OnScrollListener onScrollListener;
/**
* MyScrollView,MyScrollView , Y ,
*/
private int lastScrollY;
public MyScrollView(Context context) {
this(context, null);
}
public MyScrollView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyScrollView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
/**
*
* @param onScrollListener
*/
public void setOnScrollListener(OnScrollListener onScrollListener) {
this.onScrollListener = onScrollListener;
}
/**
* MyScrollView MyScrollView Y , onScroll
*/
private Handler handler = new Handler() {
public void handleMessage(android.os.Message msg) {
int scrollY = MyScrollView.this.getScrollY();
// , 5 handler
if(lastScrollY != scrollY){
lastScrollY = scrollY;
handler.sendMessageDelayed(handler.obtainMessage(), 5);
}
if(onScrollListener != null){
onScrollListener.onScroll(scrollY);
}
};
};
/**
* onTouchEvent, MyScrollView ,
* MyScrollView Y onScroll , ,
* MyScrollView , 5 handler , handler
* MyScrollView
*/
@Override
public boolean onTouchEvent(MotionEvent ev) {
if(onScrollListener != null){
onScrollListener.onScroll(lastScrollY = this.getScrollY());
}
switch(ev.getAction()){
case MotionEvent.ACTION_UP:
handler.sendMessageDelayed(handler.obtainMessage(), 5);
break;
}
return super.onTouchEvent(ev);
}
/**
*
*
*
* @author xiaanming
*
*/
public interface OnScrollListener{
/**
* , MyScrollView Y
* @param scrollY
* 、
*/
public void onScroll(int scrollY);
}
}
코드 를 보면 알 수 있 습 니 다.바로 ScrollView 의 스크롤 Y 값 을 감청 하 는 것 입 니 다.ScrollView 가 스크롤 감청 을 실현 하지 않 았 다 는 것 을 알 기 때문에 우 리 는 ScrollView 에 대한 감청 을 스스로 실현 해 야 합 니 다.우 리 는 자 연 스 럽 게 onTouchEvent()방법 에서 굴 러 가 는 Y 축 에 대한 감청 을 실현 할 것 이 라 고 생각 합 니 다.그러나 우리 가 ScrollView 를 미 끄 러 질 때우리 손가락 이 ScrollView 를 떠 날 때.이것 은 거 리 를 계속 미 끄 러 뜨 릴 수 있 기 때문에 사용자 의 손가락 이 떠 날 때 5 밀리초 간격 으로 ScrollView 가 미 끄 러 지 는 것 을 멈 추 었 는 지 판단 하고 ScrollView 의 스크롤 Y 값 을 OnScrollListener 인터페이스의 onScroll(int scrollY)방법 으로 되 돌려 줍 니 다.스크롤 뷰 를 호출 하기 만 하면 스크롤 뷰 를 setOnScrollListener 로 호출 하 는 방법 으로 스크롤 하 는 Y 값 을 감청 할 수 있 습 니 다.ScrollView 가 굴 러 가 는 Y 값 을 감청 하 는 것 을 실 현 했 습 니 다.다음은 간단 합 니 다.우 리 는 즉시 부상 상 자 를 사재 기 하고 부상 상 자 를 제거 하 는 것 만 표시 해 야 합 니 다.다음은 메 인 인터페이스 Activity 의 코드 작성 을 보십시오.
package com.example.meituandemo;
import android.app.Activity;
import android.content.Context;
import android.graphics.PixelFormat;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.WindowManager;
import android.view.WindowManager.LayoutParams;
import android.widget.LinearLayout;
import com.example.meituandemo.MyScrollView.OnScrollListener;
/**
* :http://blog.csdn.net/xiaanming
*
* @author xiaanming
*
*/
public class MainActivity extends Activity implements OnScrollListener{
private MyScrollView myScrollView;
private LinearLayout mBuyLayout;
private WindowManager mWindowManager;
/**
*
*/
private int screenWidth;
/**
* View
*/
private static View suspendView;
/**
*
*/
private static WindowManager.LayoutParams suspendLayoutParams;
/**
*
*/
private int buyLayoutHeight;
/**
* myScrollView
*/
private int myScrollViewTop;
/**
*
*/
private int buyLayoutTop;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myScrollView = (MyScrollView) findViewById(R.id.scrollView);
mBuyLayout = (LinearLayout) findViewById(R.id.buy);
myScrollView.setOnScrollListener(this);
mWindowManager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
screenWidth = mWindowManager.getDefaultDisplay().getWidth();
}
/**
* , , myScrollView
*/
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if(hasFocus){
buyLayoutHeight = mBuyLayout.getHeight();
buyLayoutTop = mBuyLayout.getTop();
myScrollViewTop = myScrollView.getTop();
}
}
/**
* , Y ,
* Y
*
*/
@Override
public void onScroll(int scrollY) {
if(scrollY >= buyLayoutTop){
if(suspendView == null){
showSuspend();
}
}else if(scrollY <= buyLayoutTop + buyLayoutHeight){
if(suspendView != null){
removeSuspend();
}
}
}
/**
*
*/
private void showSuspend(){
if(suspendView == null){
suspendView = LayoutInflater.from(this).inflate(R.layout.buy_layout, null);
if(suspendLayoutParams == null){
suspendLayoutParams = new LayoutParams();
suspendLayoutParams.type = LayoutParams.TYPE_PHONE; // , 2002, ,
suspendLayoutParams.format = PixelFormat.RGBA_8888;
suspendLayoutParams.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL
| LayoutParams.FLAG_NOT_FOCUSABLE; // , ,
suspendLayoutParams.gravity = Gravity.TOP; //
suspendLayoutParams.width = screenWidth;
suspendLayoutParams.height = buyLayoutHeight;
suspendLayoutParams.x = 0; // X
suspendLayoutParams.y = myScrollViewTop; //// Y
}
}
mWindowManager.addView(suspendView, suspendLayoutParams);
}
/**
*
*/
private void removeSuspend(){
if(suspendView != null){
mWindowManager.removeView(suspendView);
suspendView = null;
}
}
}
위의 코드 는 비교적 간단 합 니 다.ScrollView 가 미 끄 러 지 는 거리 에 따라 디 스 플레이 와 디 스 플레이 를 판단 하고 제거 합 니 다.디 스 플레이 상자 의 실현 은 주로 WindowManager 클래스 를 통 해 이 루어 집 니 다.이러한 addView 방법 을 사용 하여 디 스 플레이 상 자 를 추가 하고 removeView 는 디 스 플레이 상 자 를 제거 하 는 데 사 용 됩 니 다.상기 코드 를 통 해 미 단,대중 이 평가 하 는 이러한 효 과 를 실현 합 니 다.프로젝트 를 실행 하기 전에 우 리 는 반드시 AndroidManifest.xml 에
우리 프로젝트 를 실행 해서 효 과 를 봅 시다.
수정판
위의 코드 는 사실 제 가 느끼 기 에 효과 가 별로 좋 지 않 습 니 다.만약 에 화면 을 빨리 미 끄 러 뜨리 면 플 로 팅 박스 를 표시 할 때 한 카드 의 현상 이 나타 납 니 다.어떤 친구 들 은 가끔 두 개의 레이아웃 이 나타 날 때 가 있다 고 말 했 습 니 다.특히 Scrolling View 가 구 르 는 Y 에 대해 감청 할 만 한 가치 가 있다 고 말 했 습 니 다.저 는 Handler 로 얻 었 습 니 다.그리고 친구 가 저 에 게 Scrolling Tricks 라 는 것 을 소 개 했 습 니 다.제 가 다운 로드 를 해 봤 는데 미 단 망,대중 이 평가 하 는 구 매 박스 는 이런 효 과 를 사 용 했 습 니 다.그런데 Scrolling Tricks 는 API 11 이상 에서 만 사용 할 수 있 습 니 다.이것 은 약간 비극 적 입 니 다.그리고 제 가 수정 을 했 고 실현 방향 을 여러분 께 공유 하여 실현 하기 가 간단 합 니 다.
우선 ScrollView 를 스크롤 감청 해 야 합 니 다.onScrollChanged()방법 에서 스크롤 하 는 Y 값 을 직접 얻 을 수 있 습 니 다.그 전에 Handler 를 사 용 했 습 니 다.커 브 길 을 걸 었 습 니 다.코드 를 직접 보 세 요.
package com.example.meituandemo;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView;
public class MyScrollView extends ScrollView {
private OnScrollListener onScrollListener;
public MyScrollView(Context context) {
this(context, null);
}
public MyScrollView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyScrollView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
/**
*
* @param onScrollListener
*/
public void setOnScrollListener(OnScrollListener onScrollListener) {
this.onScrollListener = onScrollListener;
}
@Override
public int computeVerticalScrollRange() {
return super.computeVerticalScrollRange();
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if(onScrollListener != null){
onScrollListener.onScroll(t);
}
}
/**
*
*
*/
public interface OnScrollListener{
/**
* , MyScrollView Y
* @param scrollY
* 、
*/
public void onScroll(int scrollY);
}
}
다음은 메 인 인터페이스의 레이아웃 파일 을 보 겠 습 니 다.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/parent_layout"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="45dip"
android:scaleType="centerCrop"
android:src="@drawable/navigation_bar" />
<com.example.meituandemo.MyScrollView
android:id="@+id/scrollView"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="@+id/iamge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/pic"
android:scaleType="centerCrop" />
<include
android:id="@+id/buy"
layout="@layout/buy_layout" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/one"
android:scaleType="centerCrop" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/one"
android:scaleType="centerCrop" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/one"
android:scaleType="centerCrop" />
</LinearLayout>
<include
android:id="@+id/top_buy_layout"
layout="@layout/buy_layout" />
</FrameLayout>
</com.example.meituandemo.MyScrollView>
</LinearLayout>
다음은 레이아웃 효과 그림 입 니 다.메 인 인터페이스의 구 조 를 보면 알 수 있 듯 이 우 리 는 위 에 구 매 한 구 조 를 놓 았 습 니 다.먼저 위의 구 조 를 숨 기 고 아래 의 구조 가 미 끄 러 지면 이 를 나타 내 겠 습 니 다.만약 에 이렇게 하면 제 가 전에 쓴 글 과 차이 가 많 지 않 고 효과 가 좋 지 않 기 때문에 이 수정판 은 이런 것 이 아 닐 것 입 니 다.메 인 화면 코드 부터 볼 게 요.
package com.example.meituandemo;
import android.app.Activity;
import android.os.Bundle;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.LinearLayout;
import com.example.meituandemo.MyScrollView.OnScrollListener;
public class MainActivity extends Activity implements OnScrollListener{
/**
* MyScrollView
*/
private MyScrollView myScrollView;
/**
* MyScrollView
*/
private LinearLayout mBuyLayout;
/**
*
*/
private LinearLayout mTopBuyLayout;
@SuppressWarnings("deprecation")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myScrollView = (MyScrollView) findViewById(R.id.scrollView);
mBuyLayout = (LinearLayout) findViewById(R.id.buy);
mTopBuyLayout = (LinearLayout) findViewById(R.id.top_buy_layout);
myScrollView.setOnScrollListener(this);
//
findViewById(R.id.parent_layout).getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
// ,
onScroll(myScrollView.getScrollY());
}
});
}
@Override
public void onScroll(int scrollY) {
int mBuyLayout2ParentTop = Math.max(scrollY, mBuyLayout.getTop());
mTopBuyLayout.layout(0, mBuyLayout2ParentTop, mTopBuyLayout.getWidth(), mBuyLayout2ParentTop + mTopBuyLayout.getHeight());
}
}
메 인 화면 은 짧 은 몇 줄 의 코드 입 니 다.이 코드 들 을 보고 어떻게 했 는 지 모 를 수도 있 습 니 다.괜 찮 습 니 다.제 가 말씀 드 리 겠 습 니 다.사실은 우 리 는 위의 구 매 구조 와 아래 의 구 매 구 매 구 조 를 겹 치 게 했 습 니 다.layot()이 방법 은 View 의 크기 와 위 치 를 확정 한 다음 에 그 리 는 것 입 니 다.안의 네 개의 매개 변 수 는 각각 View 의 네 개의 점 의 좌표 이다.그의 좌 표 는 화면의 원점 이 아니 라 그의 아버지 구조 에 비해홈 페이지 맨 바깥쪽 ViewGroup 에 레이아웃 상태 가 바 뀐 모니터 를 추 가 했 습 니 다.화면 이 그 려 지면 방법 onGlobalLayout()으로 되 돌아 갑 니 다.onGlobalLayout()방법 에서 onScroll()방법 을 수 동 으로 호출 했 습 니 다.처음에 my ScrollView.getScrolly()는 0 이 었 기 때문에 scrollY 가 mBuy Layout.getTop()보다 작 을 때위의 구 매 레이아웃 의 상단 에서 my ScrollView 의 상단 까지 의 거 리 는 mBuy Layout.getTop()(즉,아래 레이아웃 의 상단 에서 my ScrollView 의 상단 까지)과 같 기 때문에 처음에 위의 구 매 레이아웃 과 아래 의 구 매 레이아웃 이 겹 쳤 습 니 다.
my ScrollView 가 위로 굴 러 가면 위 에서 구 매 한 레이아웃 의 상단 가장자리 와 my ScrollView 의 상단 가장자리 가 mBuy Layout.getTop()거 리 를 유지 해 야 하기 때문에 위의 구 매 레이아웃 도 따라 위로 굴 러 갑 니 다.scrollY 가 mBuy Layout.getTop()보다 클 때 구 매 레이아웃 의 상단 가장자리 가 네 비게 이 션 표시 줄 레이아웃 으로 미 끄 러 졌 음 을 나타 냅 니 다.그래서 이때 구 매 레이아웃 의 상단 가장자리 와 my ScrollView 의 상단 가장자리 가 항상 scrolly 라 는 거 리 를 유지 해 야 하기 때문에 구 매 레이아웃 은 네 비게 이 션 표시 줄 아래 에 계속 붙 어 있 습 니 다.붙 어 있 는 것 처럼 알 고 있 습 니까?자,그러나 이러한 사고방식 에 따라 당신 도 처음에 하나의 부상 틀 을 사용 하여 아래 의 구 매 구조 위 에 덮어 씌 운 다음 에 onScroll()방법 에서 부상 틀 의 위 치 를 업데이트 할 수 있 습 니 다.그러나 부상 틀 의 x,y 는 부모 구조 에 대한 것 이 아니 므 로 주의해 야 합 니 다.이렇게 하면 효과 도 실 현 될 수 있 습 니 다.그러나 이에 비해 복잡 한 것 이 많 습 니 다.그래서 우 리 는 비슷 한 기능 을 만 나 이런 것 을 직접 사용 하면 된다.간단명료 하 다.자,너 는 잠시 도 지체 하지 않 고 효 과 를 보고 싶다.그러면 우 리 는 다음 에 프로그램 을 실행 하 자.
여러 개의 구 매 레이아웃 효 과 를 포함 하고 있 습 니 다.다음 구 매 레이아웃 은 이전 구 매 레이아웃 을 위로 올 립 니 다.사용 방법 도 간단 합 니 다.설정 하고 자 하 는 레이아웃 을 스티커 로 설정 하 십시오.예 를 들 어
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="100dip"
android:background="#ff00ffff"
android:tag="sticky" >
<Button
android:id="@+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button" />
</FrameLayout>
이렇게 하면 이 포석 이 꼭대기 까지 굴 러 가면 꼭대기 에 붙 어 있 으 니 여러분 이 한번 해 보 세 요!이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Bitrise에서 배포 어플리케이션 설정 테스트하기이 글은 Bitrise 광고 달력의 23일째 글입니다. 자체 또는 당사 등에서 Bitrise 구축 서비스를 사용합니다. 그나저나 며칠 전 Bitrise User Group Meetup #3에서 아래 슬라이드를 발표했...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.