android实现上下左右滑动界面布局

前端之家收集整理的这篇文章主要介绍了android实现上下左右滑动界面布局前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享了android实现滑动界面布局的具体代码,供大家参考,具体内容如下

1.我使用的是ScrollView嵌套HorizontalScrollView让ScrollView负责上下滑动HorizontalScrollView负责左右滑动

2.以下代码提供了思路和完成手段,请根据具体业务去进行修改,我试过使用recyclerview进行自定义,发现一旦有了复杂业务之后会掉帧卡顿所以使用了这种方法

XML布局

  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <test.smartonet.com.myapplication.PagerScrollView
  4. xmlns:android="http://schemas.android.com/apk/res/android"
  5. xmlns:app="http://schemas.android.com/apk/res-auto"
  6. android:id="@+id/main"
  7. android:layout_width="match_parent"
  8. android:layout_height="match_parent">
  9.  
  10. <LinearLayout
  11. android:layout_width="match_parent"
  12. android:layout_height="match_parent"
  13. android:orientation="vertical">
  14.  
  15. <HorizontalScrollView
  16. android:id="@+id/hor"
  17. android:layout_width="match_parent"
  18. android:background="#e1f1f1"
  19. android:layout_height="160dp">
  20.  
  21. <LinearLayout
  22. android:layout_width="match_parent"
  23. android:layout_height="match_parent"
  24. android:layout_gravity="center|left"
  25. android:gravity="center"
  26. android:orientation="horizontal">
  27. <TextView
  28. android:layout_width="160dp"
  29. android:layout_height="60dp"
  30. android:gravity="center"
  31. android:text="A1"/> <TextView
  32. android:layout_width="160dp"
  33. android:layout_height="60dp"
  34. android:gravity="center"
  35. android:text="A2"/> <TextView
  36. android:layout_width="160dp"
  37. android:layout_height="60dp"
  38. android:gravity="center"
  39. android:text="A3"/> <TextView
  40. android:layout_width="160dp"
  41. android:layout_height="60dp"
  42. android:gravity="center"
  43. android:text="A4"/> <TextView
  44. android:layout_width="160dp"
  45. android:layout_height="60dp"
  46. android:gravity="center"
  47. android:text="A5"/><TextView
  48. android:layout_width="160dp"
  49. android:layout_height="60dp"
  50. android:gravity="center"
  51. android:text="A6"/><TextView
  52. android:layout_width="160dp"
  53. android:layout_height="60dp"
  54. android:gravity="center"
  55. android:text="A1"/> <TextView
  56. android:layout_width="160dp"
  57. android:layout_height="60dp"
  58. android:gravity="center"
  59. android:text="A2"/> <TextView
  60. android:layout_width="160dp"
  61. android:layout_height="60dp"
  62. android:gravity="center"
  63. android:text="A3"/> <TextView
  64. android:layout_width="160dp"
  65. android:layout_height="60dp"
  66. android:gravity="center"
  67. android:text="A4"/> <TextView
  68. android:layout_width="160dp"
  69. android:layout_height="60dp"
  70. android:gravity="center"
  71. android:text="A5"/><TextView
  72. android:layout_width="160dp"
  73. android:layout_height="60dp"
  74. android:gravity="center"
  75. android:text="A6"/>
  76. </LinearLayout>
  77.  
  78. </HorizontalScrollView>
  79.  
  80. <HorizontalScrollView
  81. android:id="@+id/hor1"
  82. android:layout_width="match_parent"
  83. android:scrollbars="none"
  84. android:background="#a2f2f2"
  85. android:layout_height="160dp">
  86.  
  87. <LinearLayout
  88. android:layout_width="match_parent"
  89. android:layout_height="match_parent"
  90. android:layout_gravity="center|left"
  91. android:gravity="center"
  92. android:orientation="horizontal">
  93. <TextView
  94. android:layout_width="160dp"
  95. android:layout_height="60dp"
  96. android:gravity="center"
  97. android:text="A1"/> <TextView
  98. android:layout_width="160dp"
  99. android:layout_height="60dp"
  100. android:gravity="center"
  101. android:text="A2"/> <TextView
  102. android:layout_width="160dp"
  103. android:layout_height="60dp"
  104. android:gravity="center"
  105. android:text="A3"/> <TextView
  106. android:layout_width="160dp"
  107. android:layout_height="60dp"
  108. android:gravity="center"
  109. android:text="A4"/> <TextView
  110. android:layout_width="160dp"
  111. android:layout_height="60dp"
  112. android:gravity="center"
  113. android:text="A5"/><TextView
  114. android:layout_width="160dp"
  115. android:layout_height="60dp"
  116. android:gravity="center"
  117. android:text="A6"/><TextView
  118. android:layout_width="160dp"
  119. android:layout_height="60dp"
  120. android:gravity="center"
  121. android:text="A1"/> <TextView
  122. android:layout_width="160dp"
  123. android:layout_height="60dp"
  124. android:gravity="center"
  125. android:text="A2"/> <TextView
  126. android:layout_width="160dp"
  127. android:layout_height="60dp"
  128. android:gravity="center"
  129. android:text="A3"/> <TextView
  130. android:layout_width="160dp"
  131. android:layout_height="60dp"
  132. android:gravity="center"
  133. android:text="A4"/> <TextView
  134. android:layout_width="160dp"
  135. android:layout_height="60dp"
  136. android:gravity="center"
  137. android:text="A5"/><TextView
  138. android:layout_width="160dp"
  139. android:layout_height="60dp"
  140. android:gravity="center"
  141. android:text="A6"/>
  142. </LinearLayout>
  143.  
  144. </HorizontalScrollView>
  145. <HorizontalScrollView
  146. android:id="@+id/hor2"
  147. android:layout_width="match_parent"
  148. android:scrollbars="none"
  149. android:background="#a2a2f2"
  150. android:layout_height="160dp">
  151.  
  152. <LinearLayout
  153. android:layout_width="match_parent"
  154. android:layout_height="match_parent"
  155. android:layout_gravity="center|left"
  156. android:gravity="center"
  157. android:orientation="horizontal">
  158. <TextView
  159. android:layout_width="160dp"
  160. android:layout_height="60dp"
  161. android:gravity="center"
  162. android:text="A1"/> <TextView
  163. android:layout_width="160dp"
  164. android:layout_height="60dp"
  165. android:gravity="center"
  166. android:text="A2"/> <TextView
  167. android:layout_width="160dp"
  168. android:layout_height="60dp"
  169. android:gravity="center"
  170. android:text="A3"/> <TextView
  171. android:layout_width="160dp"
  172. android:layout_height="60dp"
  173. android:gravity="center"
  174. android:text="A4"/> <TextView
  175. android:layout_width="160dp"
  176. android:layout_height="60dp"
  177. android:gravity="center"
  178. android:text="A5"/><TextView
  179. android:layout_width="160dp"
  180. android:layout_height="60dp"
  181. android:gravity="center"
  182. android:text="A6"/><TextView
  183. android:layout_width="160dp"
  184. android:layout_height="60dp"
  185. android:gravity="center"
  186. android:text="A1"/> <TextView
  187. android:layout_width="160dp"
  188. android:layout_height="60dp"
  189. android:gravity="center"
  190. android:text="A2"/> <TextView
  191. android:layout_width="160dp"
  192. android:layout_height="60dp"
  193. android:gravity="center"
  194. android:text="A3"/> <TextView
  195. android:layout_width="160dp"
  196. android:layout_height="60dp"
  197. android:gravity="center"
  198. android:text="A4"/> <TextView
  199. android:layout_width="160dp"
  200. android:layout_height="60dp"
  201. android:gravity="center"
  202. android:text="A5"/><TextView
  203. android:layout_width="160dp"
  204. android:layout_height="60dp"
  205. android:gravity="center"
  206. android:text="A6"/>
  207. </LinearLayout>
  208.  
  209. </HorizontalScrollView>
  210.  
  211. <HorizontalScrollView
  212. android:id="@+id/hor3"
  213. android:layout_width="match_parent"
  214. android:scrollbars="none"
  215. android:background="#f3f3f3"
  216. android:layout_height="160dp">
  217.  
  218. <LinearLayout
  219. android:layout_width="match_parent"
  220. android:layout_height="match_parent"
  221. android:layout_gravity="center|left"
  222. android:gravity="center"
  223. android:orientation="horizontal">
  224. <TextView
  225. android:layout_width="160dp"
  226. android:layout_height="60dp"
  227. android:gravity="center"
  228. android:text="A1"/> <TextView
  229. android:layout_width="160dp"
  230. android:layout_height="60dp"
  231. android:gravity="center"
  232. android:text="A2"/> <TextView
  233. android:layout_width="160dp"
  234. android:layout_height="60dp"
  235. android:gravity="center"
  236. android:text="A3"/> <TextView
  237. android:layout_width="160dp"
  238. android:layout_height="60dp"
  239. android:gravity="center"
  240. android:text="A4"/> <TextView
  241. android:layout_width="160dp"
  242. android:layout_height="60dp"
  243. android:gravity="center"
  244. android:text="A5"/><TextView
  245. android:layout_width="160dp"
  246. android:layout_height="60dp"
  247. android:gravity="center"
  248. android:text="A6"/><TextView
  249. android:layout_width="160dp"
  250. android:layout_height="60dp"
  251. android:gravity="center"
  252. android:text="A1"/> <TextView
  253. android:layout_width="160dp"
  254. android:layout_height="60dp"
  255. android:gravity="center"
  256. android:text="A2"/> <TextView
  257. android:layout_width="160dp"
  258. android:layout_height="60dp"
  259. android:gravity="center"
  260. android:text="A3"/> <TextView
  261. android:layout_width="160dp"
  262. android:layout_height="60dp"
  263. android:gravity="center"
  264. android:text="A4"/> <TextView
  265. android:layout_width="160dp"
  266. android:layout_height="60dp"
  267. android:gravity="center"
  268. android:text="A5"/><TextView
  269. android:layout_width="160dp"
  270. android:layout_height="60dp"
  271. android:gravity="center"
  272. android:text="A6"/>
  273. </LinearLayout>
  274.  
  275. </HorizontalScrollView>
  276. <HorizontalScrollView
  277. android:id="@+id/hor4"
  278. android:layout_width="match_parent"
  279. android:scrollbars="none"
  280. android:background="#a4f4f4"
  281. android:layout_height="200dp">
  282.  
  283. <LinearLayout
  284. android:layout_width="match_parent"
  285. android:layout_height="match_parent"
  286. android:layout_gravity="center|left"
  287. android:gravity="center"
  288. android:orientation="horizontal">
  289. <TextView
  290. android:layout_width="160dp"
  291. android:layout_height="60dp"
  292. android:gravity="center"
  293. android:text="A1"/> <TextView
  294. android:layout_width="160dp"
  295. android:layout_height="60dp"
  296. android:gravity="center"
  297. android:text="A2"/> <TextView
  298. android:layout_width="160dp"
  299. android:layout_height="60dp"
  300. android:gravity="center"
  301. android:text="A3"/> <TextView
  302. android:layout_width="160dp"
  303. android:layout_height="60dp"
  304. android:gravity="center"
  305. android:text="A4"/> <TextView
  306. android:layout_width="160dp"
  307. android:layout_height="60dp"
  308. android:gravity="center"
  309. android:text="A5"/><TextView
  310. android:layout_width="160dp"
  311. android:layout_height="60dp"
  312. android:gravity="center"
  313. android:text="A6"/><TextView
  314. android:layout_width="160dp"
  315. android:layout_height="60dp"
  316. android:gravity="center"
  317. android:text="A1"/> <TextView
  318. android:layout_width="160dp"
  319. android:layout_height="60dp"
  320. android:gravity="center"
  321. android:text="A2"/> <TextView
  322. android:layout_width="160dp"
  323. android:layout_height="60dp"
  324. android:gravity="center"
  325. android:text="A3"/> <TextView
  326. android:layout_width="160dp"
  327. android:layout_height="60dp"
  328. android:gravity="center"
  329. android:text="A4"/> <TextView
  330. android:layout_width="160dp"
  331. android:layout_height="60dp"
  332. android:gravity="center"
  333. android:text="A5"/><TextView
  334. android:layout_width="160dp"
  335. android:layout_height="60dp"
  336. android:gravity="center"
  337. android:text="A6"/>
  338. </LinearLayout>
  339.  
  340. </HorizontalScrollView>
  341.  
  342. <HorizontalScrollView
  343. android:id="@+id/hor5"
  344. android:layout_width="match_parent"
  345. android:scrollbars="none"
  346. android:background="#f5f5f5"
  347. android:layout_height="200dp">
  348.  
  349. <LinearLayout
  350. android:layout_width="match_parent"
  351. android:layout_height="match_parent"
  352. android:layout_gravity="center|left"
  353. android:gravity="center"
  354. android:orientation="horizontal">
  355. <TextView
  356. android:layout_width="160dp"
  357. android:layout_height="60dp"
  358. android:gravity="center"
  359. android:text="A1"/> <TextView
  360. android:layout_width="160dp"
  361. android:layout_height="60dp"
  362. android:gravity="center"
  363. android:text="A2"/> <TextView
  364. android:layout_width="160dp"
  365. android:layout_height="60dp"
  366. android:gravity="center"
  367. android:text="A3"/> <TextView
  368. android:layout_width="160dp"
  369. android:layout_height="60dp"
  370. android:gravity="center"
  371. android:text="A4"/> <TextView
  372. android:layout_width="160dp"
  373. android:layout_height="60dp"
  374. android:gravity="center"
  375. android:text="A5"/><TextView
  376. android:layout_width="160dp"
  377. android:layout_height="60dp"
  378. android:gravity="center"
  379. android:text="A6"/><TextView
  380. android:layout_width="160dp"
  381. android:layout_height="60dp"
  382. android:gravity="center"
  383. android:text="A1"/> <TextView
  384. android:layout_width="160dp"
  385. android:layout_height="60dp"
  386. android:gravity="center"
  387. android:text="A2"/> <TextView
  388. android:layout_width="160dp"
  389. android:layout_height="60dp"
  390. android:gravity="center"
  391. android:text="A3"/> <TextView
  392. android:layout_width="160dp"
  393. android:layout_height="60dp"
  394. android:gravity="center"
  395. android:text="A4"/> <TextView
  396. android:layout_width="160dp"
  397. android:layout_height="60dp"
  398. android:gravity="center"
  399. android:text="A5"/><TextView
  400. android:layout_width="160dp"
  401. android:layout_height="60dp"
  402. android:gravity="center"
  403. android:text="A6"/>
  404. </LinearLayout>
  405.  
  406. </HorizontalScrollView>
  407.  
  408. <HorizontalScrollView
  409. android:id="@+id/hor6"
  410. android:layout_width="match_parent"
  411. android:scrollbars="none"
  412. android:background="#a5f5f5"
  413. android:layout_height="200dp">
  414.  
  415. <LinearLayout
  416. android:layout_width="match_parent"
  417. android:layout_height="match_parent"
  418. android:layout_gravity="center|left"
  419. android:gravity="center"
  420. android:orientation="horizontal">
  421. <TextView
  422. android:layout_width="160dp"
  423. android:layout_height="60dp"
  424. android:gravity="center"
  425. android:text="A1"/> <TextView
  426. android:layout_width="160dp"
  427. android:layout_height="60dp"
  428. android:gravity="center"
  429. android:text="A2"/> <TextView
  430. android:layout_width="160dp"
  431. android:layout_height="60dp"
  432. android:gravity="center"
  433. android:text="A3"/> <TextView
  434. android:layout_width="160dp"
  435. android:layout_height="60dp"
  436. android:gravity="center"
  437. android:text="A4"/> <TextView
  438. android:layout_width="160dp"
  439. android:layout_height="60dp"
  440. android:gravity="center"
  441. android:text="A5"/><TextView
  442. android:layout_width="160dp"
  443. android:layout_height="60dp"
  444. android:gravity="center"
  445. android:text="A6"/><TextView
  446. android:layout_width="160dp"
  447. android:layout_height="60dp"
  448. android:gravity="center"
  449. android:text="A1"/> <TextView
  450. android:layout_width="160dp"
  451. android:layout_height="60dp"
  452. android:gravity="center"
  453. android:text="A2"/> <TextView
  454. android:layout_width="160dp"
  455. android:layout_height="60dp"
  456. android:gravity="center"
  457. android:text="A3"/> <TextView
  458. android:layout_width="160dp"
  459. android:layout_height="60dp"
  460. android:gravity="center"
  461. android:text="A4"/> <TextView
  462. android:layout_width="160dp"
  463. android:layout_height="60dp"
  464. android:gravity="center"
  465. android:text="A5"/><TextView
  466. android:layout_width="160dp"
  467. android:layout_height="60dp"
  468. android:gravity="center"
  469. android:text="A6"/>
  470. </LinearLayout>
  471.  
  472. </HorizontalScrollView>
  473.  
  474. </LinearLayout>
  475. </test.smartonet.com.myapplication.PagerScrollView>

mainAvtivity的代码

  1. package test.smartonet.com.myapplication;
  2.  
  3. import android.annotation.SuppressLint;
  4. import android.content.Context;
  5. import android.support.v7.app.AppCompatActivity;
  6. import android.os.Bundle;
  7. import android.support.v7.widget.LinearLayoutManager;
  8. import android.support.v7.widget.RecyclerView;
  9. import android.util.AttributeSet;
  10. import android.util.Log;
  11. import android.view.LayoutInflater;
  12. import android.view.MotionEvent;
  13. import android.view.View;
  14. import android.view.ViewGroup;
  15. import android.widget.HorizontalScrollView;
  16. import android.widget.LinearLayout;
  17. import android.widget.ScrollView;
  18. import android.widget.TextView;
  19. import android.widget.Toast;
  20.  
  21. import org.w3c.dom.Text;
  22.  
  23. import java.lang.reflect.Array;
  24. import java.util.ArrayList;
  25. import java.util.List;
  26.  
  27. /**
  28. * zhaohan creat 2019/3/6
  29. */
  30. public class MainActivity extends AppCompatActivity {
  31. String TAG = "主程序";
  32. float mPosX;
  33. float mPosY;
  34. float mCurPosX;
  35. float mCurPosY;
  36. int offset=10;//偏移量
  37. int friction = 10;//摩擦力
  38. final List<HorizontalScrollView> list = new ArrayList();
  39.  
  40. @SuppressLint("ClickableViewAccessibility")
  41. @Override
  42. protected void onCreate(Bundle savedInstanceState) {
  43. super.onCreate(savedInstanceState);
  44. setContentView(R.layout.activity_main);
  45. final PagerScrollView scrollView = findViewById(R.id.main);
  46. list.add((HorizontalScrollView) findViewById(R.id.hor));
  47. list.add((HorizontalScrollView) findViewById(R.id.hor1));
  48. list.add((HorizontalScrollView) findViewById(R.id.hor2));
  49. list.add((HorizontalScrollView) findViewById(R.id.hor3));
  50. list.add((HorizontalScrollView) findViewById(R.id.hor4));
  51. list.add((HorizontalScrollView) findViewById(R.id.hor5));
  52. list.add((HorizontalScrollView) findViewById(R.id.hor6));
  53.  
  54. for(HorizontalScrollView horizontalScrollView:list){
  55. horizontalScrollView.setOnTouchListener(new View.OnTouchListener() {
  56. @Override
  57. public boolean onTouch(View v,MotionEvent event) {
  58. switch (event.getAction()) {
  59. case MotionEvent.ACTION_DOWN:
  60. mPosX = event.getX();
  61. mPosY = event.getY();
  62. Log.w(TAG,mPosY+"");
  63. break;
  64. case MotionEvent.ACTION_MOVE:
  65. mCurPosX = event.getX();
  66. mCurPosY = event.getY();
  67. case MotionEvent.ACTION_UP:
  68. if (mCurPosX - mPosX > 0 && (Math.abs(mCurPosX - mPosX) > offset)) {
  69. int speed = 10;//速度
  70. int distance = 20;//滑动距离
  71. if((Math.abs(mCurPosX - mPosX))>50){
  72. speed = (int) Math.abs(mCurPosX - mPosX)/friction;
  73. distance = (int) Math.abs(mCurPosX - mPosX)/3;//滑动距离
  74. }
  75. //向右滑動
  76. Log.w(TAG,"向右滑动了!");
  77. while(distance>0) {
  78. distance = distance - speed;
  79. for(HorizontalScrollView horizontalScrollView:list){
  80. horizontalScrollView.smoothScrollBy(distance,0);
  81. }
  82. }
  83. return true;//true为屏蔽范围内的其他滑动监听
  84. } else if (mCurPosX - mPosX < 0 && (Math.abs(mCurPosX - mPosX) > offset)) {
  85. int speed = 10;//速度
  86. int distance = 20;//滑动距离
  87. if((Math.abs(mCurPosX - mPosX))>50){
  88. speed = (int) Math.abs(mCurPosX - mPosX)/friction;
  89. distance = (int) Math.abs(mCurPosX - mPosX)/3;//滑动距离
  90. }
  91. //向左滑动
  92. Log.w(TAG,"向左滑动了!");
  93. //改为滑动
  94. while(distance>0){
  95. distance=distance-speed;
  96. for(HorizontalScrollView horizontalScrollView:list){
  97. horizontalScrollView.smoothScrollBy(-distance,0 );
  98. }
  99. }
  100. return true;//true为屏蔽范围内的其他滑动监听
  101. }
  102. break;
  103. }
  104. return true;//true为屏蔽范围内的其他滑动监听
  105. }
  106. });
  107. }
  108. }
  109. }
  110.  
  111. class PagerScrollView extends ScrollView {
  112.  
  113. private float xDistance,yDistance,xLast,yLast;
  114.  
  115. public PagerScrollView(Context context) {
  116. super(context);
  117. }
  118.  
  119. public PagerScrollView(Context context,AttributeSet attrs) {
  120. super(context,attrs);
  121. }
  122.  
  123. public PagerScrollView(Context context,AttributeSet attrs,int defStyle) {
  124. super(context,attrs,defStyle);
  125. }
  126.  
  127. @Override
  128. public boolean onInterceptTouchEvent(MotionEvent ev) {
  129. switch (ev.getAction()) {
  130. case MotionEvent.ACTION_DOWN:
  131. xDistance = yDistance = 0f;
  132. xLast = ev.getX();
  133. yLast = ev.getY();
  134. break;
  135. case MotionEvent.ACTION_MOVE:
  136. final float curX = ev.getX();
  137. final float curY = ev.getY();
  138.  
  139. xDistance += Math.abs(curX - xLast);
  140. yDistance += Math.abs(curY - yLast);
  141. xLast = curX;
  142. yLast = curY;
  143.  
  144. /**
  145. * X轴滑动距离大于Y轴滑动距离,也就是用户横向滑动时,返回false,ScrollView不处理这次事件,
  146. * 让子控件中的TouchEvent去处理,所以横向滑动的事件交由ViewPager处理,
  147. * ScrollView只处理纵向滑动事件
  148. */
  149. if (xDistance > yDistance) {
  150. return false;
  151. }
  152. }
  153.  
  154. return super.onInterceptTouchEvent(ev);
  155. }
  156. }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

猜你在找的Android相关文章