มุมมองแนวตั้ง
คำตอบอื่น ๆ ที่นี่ทั้งหมดดูเหมือนจะมีปัญหาบางอย่างกับพวกเขา แม้แต่โครงการโอเพ่นซอร์สที่แนะนำก็ไม่ได้รวมคำขอดึงล่าสุดกับการแก้ไขข้อบกพร่อง จากนั้นฉันพบ a VerticalViewPagerจาก Google ว่าพวกเขาใช้แอป DeskClock ฉันเชื่อมั่นในการใช้งานของ Google มากกว่าคำตอบอื่น ๆ (เวอร์ชันของ Google คล้ายกับคำตอบที่ได้รับคะแนนสูงสุดในปัจจุบัน แต่ละเอียดยิ่งขึ้นกว่านี้)
ตัวอย่างเต็ม
ตัวอย่างนี้เกือบเหมือนกับตัวอย่างพื้นฐานของViewPagerของฉันโดยมีการเปลี่ยนแปลงเล็กน้อยเพื่อใช้VerticalViewPagerคลาส
XML
เพิ่มเลย์เอาต์ xml สำหรับกิจกรรมหลักและสำหรับแต่ละหน้า (แฟรกเมนต์) หมายเหตุที่เราใช้มากกว่ามาตรฐานVerticalViewPager ViewPagerฉันจะรวมรหัสสำหรับด้านล่าง
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context="com.example.verticalviewpager.MainActivity">
<com.example.myapp.VerticalViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
fragment_one.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="@+id/textview"
android:textSize="30sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
รหัส
รหัสสำหรับVerticalViewPagerไม่ใช่ของฉัน มันเป็นเพียงเวอร์ชันที่ถูกตัดทอน (ไม่มีความคิดเห็น) จากซอร์สโค้ดของ Google ลองดูเวอร์ชั่นล่าสุดสำหรับเวอร์ชั่นล่าสุด ความคิดเห็นที่มีประโยชน์สำหรับการทำความเข้าใจสิ่งที่เกิดขึ้น
VerticalViewPager.java
import android.support.v4.view.ViewPager;
public class VerticalViewPager extends ViewPager {
public VerticalViewPager(Context context) {
this(context, null);
}
public VerticalViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
@Override
public boolean canScrollHorizontally(int direction) {
return false;
}
@Override
public boolean canScrollVertically(int direction) {
return super.canScrollHorizontally(direction);
}
private void init() {
setPageTransformer(true, new VerticalPageTransformer());
setOverScrollMode(View.OVER_SCROLL_NEVER);
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
final boolean toIntercept = super.onInterceptTouchEvent(flipXY(ev));
flipXY(ev);
return toIntercept;
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
final boolean toHandle = super.onTouchEvent(flipXY(ev));
flipXY(ev);
return toHandle;
}
private MotionEvent flipXY(MotionEvent ev) {
final float width = getWidth();
final float height = getHeight();
final float x = (ev.getY() / height) * width;
final float y = (ev.getX() / width) * height;
ev.setLocation(x, y);
return ev;
}
private static final class VerticalPageTransformer implements ViewPager.PageTransformer {
@Override
public void transformPage(View view, float position) {
final int pageWidth = view.getWidth();
final int pageHeight = view.getHeight();
if (position < -1) {
view.setAlpha(0);
} else if (position <= 1) {
view.setAlpha(1);
view.setTranslationX(pageWidth * -position);
float yPosition = position * pageHeight;
view.setTranslationY(yPosition);
} else {
view.setAlpha(0);
}
}
}
}
MainActivity.java
ผมสลับเดียวที่ออกมาสำหรับVerticalViewPagerViewPager
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
public class MainActivity extends AppCompatActivity {
static final int NUMBER_OF_PAGES = 2;
MyAdapter mAdapter;
VerticalViewPager mPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mAdapter = new MyAdapter(getSupportFragmentManager());
mPager = findViewById(R.id.viewpager);
mPager.setAdapter(mAdapter);
}
public static class MyAdapter extends FragmentPagerAdapter {
public MyAdapter(FragmentManager fm) {
super(fm);
}
@Override
public int getCount() {
return NUMBER_OF_PAGES;
}
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return FragmentOne.newInstance(0, Color.WHITE);
case 1:
// return a different Fragment class here
// if you want want a completely different layout
return FragmentOne.newInstance(1, Color.CYAN);
default:
return null;
}
}
}
public static class FragmentOne extends Fragment {
private static final String MY_NUM_KEY = "num";
private static final String MY_COLOR_KEY = "color";
private int mNum;
private int mColor;
// You can modify the parameters to pass in whatever you want
static FragmentOne newInstance(int num, int color) {
FragmentOne f = new FragmentOne();
Bundle args = new Bundle();
args.putInt(MY_NUM_KEY, num);
args.putInt(MY_COLOR_KEY, color);
f.setArguments(args);
return f;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mNum = getArguments() != null ? getArguments().getInt(MY_NUM_KEY) : 0;
mColor = getArguments() != null ? getArguments().getInt(MY_COLOR_KEY) : Color.BLACK;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragment_one, container, false);
v.setBackgroundColor(mColor);
TextView textView = v.findViewById(R.id.textview);
textView.setText("Page " + mNum);
return v;
}
}
}
เสร็จ
คุณควรจะสามารถเรียกใช้แอพและดูผลลัพธ์ในภาพเคลื่อนไหวด้านบน
ดูสิ่งนี้ด้วย
