之前看《第一行代码》，敲完了最后一个项目酷欧天气，后来想着自己能不能将这个APP的功能扩展更新一下。就把酷偶天气和手机上的天气预报进行了比较，发现酷欧天气只能查看一个城市的天气数据，而手机上的天气预报可以通过添加城市来查看多个城市的数据，要做的就是添加，然后通过手指滑动查看多个已添加的城市天气数据。
看到滑动我就想到碎片，可由于是新手，刚开始想的总是很简单，想着要实现滑动效果的话就要有多个碎片，所以每添加一个城市就要添加一个碎片来显示城市的数据，让碎片和城市一一对应，还想着能不能把碎片写成数组。。。
后来问了相关贴吧又思考了一两天，才想出了办法：用两个碎片实现手机界面滑动的视觉效果，然后让在界面上的碎片显示你要的城市数据。
由于要动手修改酷欧天气对我来说是个大工程，所以我就又写了个小工程做了一下实验。用两个碎片显示数字，通过添加和删除按钮决定你最多要几个数字，再通过滑动查看你当前要查看的是第几个数字。
20180203_223716.gif
界面十分简单，就俩，一个是碎片，一个是MainAcitivity
碎片就用于显示数字：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000"
android:layout_above="@+id/Text_1"/>
<TextView
android:id="@+id/Text_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="100dp"
android:layout_centerInParent="true"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000"
android:layout_below="@+id/Text_1"/>
</RelativeLayout>
MainAcitivity用于显示碎片和添加删除按钮
<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"
tools:context="com.example.administrator.fragment_add.MainActivity">
<FrameLayout
android:id="@+id/fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/btn_add"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:text="Add"/>
<Button
android:id="@+id/btn_delete"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:text="Delete"/>
</LinearLayout>
</LinearLayout>
之后是两个碎片的代码，其实两个碎片完全一样，只是为了有滑动的视觉效果，才写两个碎片的，在这就上其中一个。
public class Fragment_One extends Fragment {
@Nullable
private View view;
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
view=inflater.inflate(R.layout.fragment,container,false);
return view;
}
public void setNum(String num){
TextView textView=(TextView)view.findViewById(R.id.Text_1);
textView.setText(num);
}
}
setNum(String num)是为了让MainAcitivity在碎片滑动时调用更新数据用的。
接着是MainAcitivity：
MainAcitivity变量的定义
private FragmentTransaction transaction;
private Fragment_One fragment_one;
private Fragment_Two fragment_two;
private int RIGHT=0;
private int LEFT=1;
private int STATE=1;
private int i=1;
private int max=1;
public static float x1=0;
public static float x2=0;
RIGHT和LEFT是根据手势操作判断当前是向左还是向右滑动，i表示当前显示的是数字几，max表示添加的最大数值，x1和x2表示手指按下和松开屏幕时的横轴位置。
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fragment_one=new Fragment_One();
fragment_two=new Fragment_Two();
transaction=getSupportFragmentManager().beginTransaction();
transaction.add(R.id.fragment,fragment_one);
transaction.add(R.id.fragment,fragment_two);
transaction.hide(fragment_two);
transaction.commit();
Button btn_add=(Button)findViewById(R.id.btn_add);
Button btn_del=(Button)findViewById(R.id.btn_delete);
btn_add.setOnClickListener(this);
btn_del.setOnClickListener(this);
}
先添加两个碎片，再将第二个碎片隐藏，btn_add和btn_del表示max++和max--。
手势操作：
public boolean onTouchEvent(MotionEvent event) {
//继承了Activity的onTouchEvent方法，直接监听点击事件
if (event.getAction() == MotionEvent.ACTION_DOWN) {
//当手指按下的时候
x1 = event.getX();
}
if(event.getAction()==MotionEvent.ACTION_UP){
//当手指放开的时候
x2=event.getX();
if(x2-x1>50){//右滑
setTabSelected(RIGHT,STATE);
}else if(x1-x2>50){//左滑
setTabSelected(LEFT,STATE);
}
}
return super.onTouchEvent(event);
};
右滑左滑的具体操作：
private void setTabSelected(int lr,int frag_state){
transaction=getSupportFragmentManager().beginTransaction();
if (lr==1){//右滑
transaction.setCustomAnimations(R.anim.push_left_in,R.anim.push_left_out);
if(i<max){
i++;
judgeState(frag_state,transaction,i);
}
}else if(lr==0){//左滑
transaction.setCustomAnimations(R.anim.push_right_in,R.anim.push_right_out);
if(i>1){
i--;
judgeState(frag_state,transaction,i);
}
}
transaction.commit();
}
lr表示向左还是向右，frag_state表示当前显示的是第几个碎片，若右滑则执行右滑的动画，然后i++，再跳入judgeState方法进行碎片一和碎片二切换的具体操作。若左滑则相反。
private void judgeState(int frag_state,FragmentTransaction transaction,int num){
if(frag_state==1){
transaction.hide(fragment_one);
fragment_two.setNum(num+"");
transaction.show(fragment_two);
STATE=2;
}else if(frag_state==2){
transaction.hide(fragment_two);
fragment_one.setNum(num+"");
transaction.show(fragment_one);
STATE=1;
}
}
若frag_state为1，表示当前显示的是碎片一，而接下来要显示的是碎片二，所以碎片一隐藏，
transaction.hide(fragment_one);
碎片二数据更新，
fragment_two.setNum(num+"");
碎片二显示，
transaction.show(fragment_two);
状态STATE改为2。
STATE=2;
若frag_state为2则相反。
最后是左滑右滑的动画：
push_left_in:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="100%p" android:toXDelta="0"
android:duration="200" />
</set>
push_left_out:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0" android:toXDelta="-100%p"
android:duration="200" />
</set>
push_right_in:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="-100%p" android:toXDelta="0"
android:duration="200" />
</set>
push_right_out:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0" android:toXDelta="100%p"
android:duration="200" />
</set>
网友评论