记分牌

     我们知道使用FlipViewController可以展示立体额翻页效果,左右翻页,上下翻页,现在使用FlipViewController来模拟一个记分牌效果。

1.首先要导入FlipViewController类所在的aphid-flipview-library。

下载地址:http://download.csdn.net/detail/forwardyzk/8333027

2.定义一个类ScoreBoardView继承LinearLayout

加载LinearLayout中的xml布局文件

layout_scoreboard_view.xml

<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="horizontal"
    tools:context="com.yzk.filpviewdemo.MainActivity" >

    <com.aphidmobile.flip.FlipViewController
        android:id="@+id/flipViewLeft"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_marginRight="5dp"
        android:layout_weight="1" >
    </com.aphidmobile.flip.FlipViewController>

    <com.aphidmobile.flip.FlipViewController
        android:id="@+id/flipViewRight"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_marginLeft="5dp"
        android:layout_weight="1" >
    </com.aphidmobile.flip.FlipViewController>

</LinearLayout>

现在初始化View

public void initView() {
		View.inflate(mContext, R.layout.layout_scoreboard_view, this);
		flipViewLeft = (FlipViewController) findViewById(R.id.flipViewLeft);
		flipViewRight = (FlipViewController) findViewById(R.id.flipViewRight);
		flipViewLeft.setAdapter(new FlipViewAdapter(
				android.R.color.holo_red_dark));
		flipViewRight.setAdapter(new FlipViewAdapter(android.R.color.black));
	}


3.给 FlipViewController设置的适配器

class FlipViewAdapter extends BaseAdapter {
		private int mColor;

		public FlipViewAdapter(int color) {
			this.mColor = color;
		}

		@Override
		public int getCount() {
			return 10;
		}

		@Override
		public Object getItem(int position) {
			return position;
		}

		@Override
		public long getItemId(int position) {
			return position;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			ViewHolder holder = null;
			if (convertView == null) {
				holder = new ViewHolder();
				convertView = View.inflate(mContext, R.layout.item_text_view,
						null);
				holder.tv_score = (TextView) convertView
						.findViewById(R.id.tv_score);
				convertView.setTag(holder);
			} else {
				holder = (ViewHolder) convertView.getTag();
			}
			holder.tv_score.setTextColor(mContext.getResources().getColor(
					mColor));
			holder.tv_score.setText(String.valueOf(getItem(position)));
			return convertView;
		}

	}


设置对应的显示数字的颜色
item对应的布局文件

item_text_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tv_score"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        android:gravity="center"
        android:text="0"
        android:textColor="@android:color/black"
        android:textSize="130sp" />

</LinearLayout>


使用步骤:

activity_main.xml

<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="horizontal"
    tools:context="com.yzk.filpviewdemo.MainActivity" >

    <com.yzk.view.ScoreBoardView
        android:id="@+id/scoreview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </com.yzk.view.ScoreBoardView>

</LinearLayout>




MainActivity.java

public class MainActivity extends Activity {

	private ScoreBoardView view;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		view = (ScoreBoardView) findViewById(R.id.scoreview);
	}

	@Override
	protected void onResume() {
		super.onResume();
		view.onResume();
	}

	@Override
	protected void onPause() {
		super.onPause();
		view.onPause();
	}
}

源码下载地址:http://download.csdn.net/detail/forwardyzk/8333517


默认是纵向

如果设置横向:

 FlipViewController flip = new FlipViewController(mContext,FlipViewController.HORIZONTAL);

或者布局文件中设置

 <com.aphidmobile.flip.FlipViewController
        android:id="@+id/flipViewLeft"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_marginRight="5dp"
        android:layout_weight="1"
        app:orientation="horizontal" >
    </com.aphidmobile.flip.FlipViewController>

效果图:





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是一个简单的uniapp篮球记分牌的实现方法: 1. 在uniapp项目中创建一个新页面,例如Scoreboard.vue。 2. 在Scoreboard.vue中添加以下代码: ```html <template> <view class="container"> <view class="team"> <view class="name">{{ team1Name }}</view> <view class="score">{{ team1Score }}</view> </view> <view class="team"> <view class="name">{{ team2Name }}</view> <view class="score">{{ team2Score }}</view> </view> <view class="buttons"> <button class="button" @click="addScore(1, 1)">+1</button> <button class="button" @click="addScore(1, 2)">+2</button> <button class="button" @click="addScore(1, 3)">+3</button> <button class="button" @click="addScore(2, 1)">+1</button> <button class="button" @click="addScore(2, 2)">+2</button> <button class="button" @click="addScore(2, 3)">+3</button> <button class="button" @click="resetScore">Reset</button> </view> </view> </template> <script> export default { data() { return { team1Name: 'Team 1', team2Name: 'Team 2', team1Score: 0, team2Score: 0 } }, methods: { addScore(team, score) { if (team === 1) { this.team1Score += score } else if (team === 2) { this.team2Score += score } }, resetScore() { this.team1Score = 0 this.team2Score = 0 } } } </script> <style> .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .team { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; } .name { font-size: 24px; font-weight: bold; } .score { font-size: 48px; font-weight: bold; } .buttons { display: flex; flex-direction: row; align-items: center; justify-content: center; } .button { margin: 10px; padding: 10px 20px; font-size: 24px; font-weight: bold; border-radius: 10px; background-color: #007aff; color: #fff; } </style> ``` 3. 在Scoreboard.vue中,我们定义了两个队伍的名称和得分,以及加分和重置按钮的功能。当用户点击加分按钮时,我们将根据所选的队伍和分数来更新得分。当用户点击重置按钮时,我们将重置得分为零。 4. 在样式中,我们定义了一个简单的布局,包括两个队伍的名称和得分,以及加分和重置按钮。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值