Contoh yang diberikan di bawah ini menunjukkan cara membuat ViewPager sederhana
dengan tiga halaman di Sketchware
1. Pada area VIEW di main.xml tambahkan Linear vertical linear1 dengan width and height ke ukuran match_parent. ViewPager akan di buat secara terprogram dan tambahkan pada linear1.
2. Hidupkan AppCompat and design.
3. Rubah warna pada colorAccent menjadi putih.
4. Tambahkan 3 Halaman CustomView dengan nama page1.xml, page3.xml, and page5.xml. hal ini akan bertindak sebagai halaman ViewPager.
pada halaman page1.xml tambahkan Switch dan berikan nama switch2.
Pada page3.xml tambahkan TextView dengan nama textview1.
Pada page5.xml Tambahkan Button dengan nama button1. Lihat gambar di bawah
5. Buat Blok pada more block dan beri nama extra dan masuk ke dalamnya tambahkan blok add source directly.
Tambahkan kode di bawah.
} // Create a list of pages int[] pageId = { R.layout.page1, R.layout.page3, R.layout.page5 }; // Define Adapter for ViewPager private class MyPagerAdapter extends android.support.v4.view.PagerAdapter {
// Get total number of pages public int getCount() { return pageId.length; } // Get Title of pages @Override public CharSequence getPageTitle(int position) { String[] pageTitle = {"Tab-1", "Tab-2", "Tab-3"}; return pageTitle[position]; } // Get the Views to be displayed at each position public Object instantiateItem(View collection, int position) { // Get View from their Ids View view = getLayoutInflater().inflate(pageId[position], null); ((android.support.v4.view.ViewPager)collection).addView(view, 0); if (position == 0) { // For the page at position 0 (page1.xml), define Switch and setOnCheckedChangeListener for it. final Switch tab1switch1 = view.findViewById(R.id.switch2); tab1switch1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton _param1, boolean _param2){ final boolean _isChecked = _param2; if (_isChecked){ tab1switch1.setText("Switch ON"); } else { tab1switch1.setText("Switch OFF"); } } }); } else if (position == 1) { // For the page at position 1 (page3.xml), define TextView and setOnClickListener for it. final TextView tab2textview1 = view.findViewById(R.id.textview1); tab2textview1.setOnClickListener(new View.OnClickListener() { @Override public void onClick (View v){ showMessage("TextView 1 Clicked."); } }); } else if (position == 2) { // For the page at position 2 (page5.xml), define Button and setOnClickListener for it. final Button tab3button1 = view.findViewById(R.id.button1); tab3button1.setOnClickListener(new View.OnClickListener() { @Override public void onClick (View v){ showMessage("Button 1 Clicked."); } }); } // Return the View corresponding to position selected return view; } @Override public void destroyItem(View arg0, int arg1, Object arg2) { ((android.support.v4.view.ViewPager) arg0).removeView((View) arg2); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == ((View) arg1); }
6. pada event onCreate, tambahkan dan gunakan blok add source directly dam tambahkan kode di bawah ini. // Create a ViewPager, set adapter for it, and set it's current item to position 0 (page1.xml). android.support.v4.view.ViewPager viewPager1 = new android.support.v4.view.ViewPager(this); viewPager1.setAdapter(new MyPagerAdapter()); viewPager1.setCurrentItem(0); // Define a new TabLayout, set it up with the ViewPager, and add it to the AppBarLayout which surrounds the ToolBar. The AppBarLayout thus will contain ToolBar and TabLayout. android.support.design.widget.TabLayout tabLayout = new android.support.design.widget.TabLayout(this); tabLayout.setupWithViewPager(viewPager1); ((android.support.design.widget.AppBarLayout) _toolbar.getParent()).addView(tabLayout); // Add the ViewPager to linear1 of main.xml linear1.addView(viewPager1);
Contoh yang disediakan di bawah ini menunjukkan cara membuat
TabLayout yang dapat digulir sederhana dan menambahkan
TabLayout.OnTabSelectedListener ke Sketchware.
1.
Di area VIEW main.xml tambahkan Linear Vertical linear1 dengan lebar dan tinggi
sebagai match_parent. Di dalamnya tambahkan Linear Horizontal linear2.
2. Hidupkan AppCompat dan pastikan pada posisi ON.
3. Pada event onCreate, Gunakan Blok add source directly dan copy paste kode di bawah ini.
// Create a TabLayout (tabLayout) android.support.design.widget.TabLayout tabLayout = new android.support.design.widget.TabLayout(this); // Make TabLayout scrollable tabLayout.setTabMode(android.support.design.widget.TabLayout.MODE_SCROLLABLE); // Add Tabs to the TabLayout tabLayout.addTab(tabLayout.newTab().setText("Sunday")); tabLayout.addTab(tabLayout.newTab().setText("Monday")); tabLayout.addTab(tabLayout.newTab().setText("Tuesday")); tabLayout.addTab(tabLayout.newTab().setText("Wednesday")); tabLayout.addTab(tabLayout.newTab().setText("Thursday")); tabLayout.addTab(tabLayout.newTab().setText("Friday")); tabLayout.addTab(tabLayout.newTab().setText("Saturday")); // Add TabLayout to linear2 linear2.addView(tabLayout); // Add OnTabSelectedListener to the TabLayout tabLayout.addOnTabSelectedListener(new android.support.design.widget.TabLayout.OnTabSelectedListener(){ @Override public void onTabSelected(android.support.design.widget.TabLayout.Tab tab){ switch(tab.getText().toString()){ case "Sunday": linear1.setBackgroundColor(Color.RED); break; case "Monday": linear1.setBackgroundColor(Color.parseColor("#aaddab")); break; case "Tuesday": linear1.setBackgroundColor(Color.parseColor("#0dddad")); break; case "Wednesday": linear1.setBackgroundColor(Color.BLUE); break; case "Thursday": linear1.setBackgroundColor(Color.YELLOW); break; case "Friday": linear1.setBackgroundColor(Color.WHITE); break; case "Saturday": linear1.setBackgroundColor(Color.GREEN); break; } } @Override public void onTabReselected(android.support.design.widget.TabLayout.Tab tab){ } @Override public void onTabUnselected(android.support.design.widget.TabLayout.Tab tab){ }
Kami dapat menerapkan Pidato pengakuan menggunakan kode di blok sumber tambahan langsung di Sketchware. Ikuti langkah-langkah di bawah ini untuk menerapkan Pengenalan ucapan di Sketchware.
1. Create a new android project in Sketchware.
2. Pada halaman utama tambahkan Button dengan nama button1 dan Blok EditText dengan nama edittext1 (or a TextView).
3. Buat komponen baruyaitu FilePicker dan kasih nama fp.
4. Buat More Block baru dengan nama extra.
5. Di dalam blok extra, gunakan blok add source directly dan silahkan copy paste kode berikut:
} public static final int REQ_CODE_SPEECH_INPUT = 1; {
6. Pada event button1 onClick, tambahkan blok add source directly dengan menggunakan kode beikut:
Intent intent = new Intent(android.speech.RecognizerIntent.ACTION_RECOGNIZE_SPEECH); intent.putExtra(android.speech.RecognizerIntent.EXTRA_LANGUAGE_MODEL, android.speech.RecognizerIntent.LANGUAGE_MODEL_FREE_FORM); intent.putExtra(android.speech.RecognizerIntent.EXTRA_LANGUAGE, Locale.getDefault()); intent.putExtra(android.speech.RecognizerIntent.EXTRA_PROMPT, "Speak Now"); try { startActivityForResult(intent, REQ_CODE_SPEECH_INPUT); } catch (ActivityNotFoundException a) { Toast.makeText(getApplicationContext(), "There was an error", Toast.LENGTH_SHORT).show(); }
7. Pada blok FilePicker onFilesPicked. Gunakan blok add source directly dan tempelkan kode berikut ini:
} break; case REQ_CODE_SPEECH_INPUT: if (_resultCode == RESULT_OK && null != _data) { ArrayList<String> result = _data.getStringArrayListExtra(android.speech.RecognizerIntent.EXTRA_RESULTS); edittext1.setText(result.get(0));
8. Simpan dan jalankan proyek. Sekarang di aplikasi, Tombol dapat ditekan untuk berbicara hal-hal yang akan ditulis di bidang EditText
Untuk membuat aplikasi Senter untuk Android menggunakan aplikasi Sketchware ikuti langkah-langkah yang diberikan di bawah ini dan jangan sampai terlewat sedikitpun. 1. Buat proyek baru di Sketchware. Di area VIEW, tambahkan ImageView dan berikan nama imageview1. Tetapkan lebar dan tinggi ke 100, dan ketik skala ke FIT_XY.
2. Gunakan 2 gambar ikon pada kustom pilihan pada Sketchware yang bernama ic_flash_on_black dan ic_flash_off_black.
3. Tetapkan ic_flash_off_black sebagai gambar imageview1.
4. Pada pilihan tombol Library,Hidupkan AppCompat and Design.
5. Add a Camera component. Berikan nama cam.
6. Tambahkan dua variabel boolean dan berikan nama flashLightStatus dan halCameraFlash.
7. Buat dua more blok dengan nama: flashLightOn and flashLightOff.
8. Pada onCreate event, gunakan add blok source directly dan copy paste kode berikut :
Di Sketchware, untuk membuat aplikasi di mana data dengan nilai numerik dapat ditambahkan dan dilihat sebagai diagram lingkaran, ikuti langkah-langkah yang diberikan di bawah ini.
1. Pada aplikasi Sketchware buat proyek baru.
2. Pada main.xml tambahkan tombol dengan nama button2 dan tambahkan listview dengan nama listview2.
3. Buat CustomView items.xml dan tambahkan dua TextViews dengan nama textview1 dantextview2.
4. Buka dan pilih items.xml sebagai CustomView dari listview2.
5. Pada MainActivity.java, Tambahkan komponen Shared Preferences component dengan nama sp:sp, dan tambahkan komponen Intent dan berikan nama i.
6. Tambahkan Vatiabel String dengan mama jsondata, dan Variabel ListMap dengan nama maplist.
7. Pada Even klik onCreate gunakan blok set string arahkan ke jsondata pada kolom to data Json Anda yang berisi 'teks' dan 'angka' sebagai kunci. Konversikan ke ListMap dan setting ke maplist dan tampilkan di ListView.
Untuk kode Json String pada isian diata gunakan kode di bawah ini, Silahkan dirubah sesuai keinginan anda pada tilisan angka dan tulisan Negara :
8. Pada even onBindCustomView, tampilkan data dari maplist di TextViews dan di CustomView items.xml.
9. Buat tampilan baru dan berikan nama piechart.xml.
10. Pada even button2 klik pada onClick do MainActivity.java, Simpan maplist pada Shared Preferences dan gunakan Intent i untuk setscreen gulir ke PiechartActivity.java.
11. Pada piechart.xml tambhan kan LinearV dan berikan nama linear1.
12. Selanjutnha pada PiechartActivity.java Tambahkan komponen Shared Preferences component berikan nama sp:sp, tambahkan variabel Map dan masih nama map, dan variabel ListMap berikan nama listmap.
13. Pada Event klik onCreate dan gunalam blok untuk memdapatka data dari komponen Shared Preferences ke listmap, dan pasang kode di bawah pada add sourche dirrectly pada PieChartView.
Kode untuk blok add source directly : PieChartView chart = new PieChartView(this, listmap, "number", "text");
linear1.addView(chart);
Di sini 'teks' dan 'angka' adalah kunci yang digunakan dalam Json String di MainActivity.java.
14. Buat blok pada More Block dan berikan nama extra.
15. Pada blok more block extra, Gunaka blok add source directly dan taruhlah kode di bawah ini untuk View class PieChartView.
} public class PieChartView extends View { private Paint fillPaint; private Paint strokePaint; private ArrayList<HashMap<String, Object>> list = new ArrayList<>(); private String numkey; private String labelkey; public PieChartView(Context context, ArrayList<HashMap<String, Object>> list, String numkey, String labelkey){ super(context); fillPaint = new Paint(); strokePaint = new Paint(); this.list = list; this.numkey = numkey; this.labelkey = labelkey; } @Override protected void onDraw(Canvas canvas) { int viewWidth = this.getMeasuredWidth(); int viewHeight = this.getMeasuredHeight(); float startAngle = 0; float sweepAngle = 0; int lineHeight = 0; float total = 0; for (int i =0; i<list.size(); i++){ total = total + Float.valueOf(list.get(i).get(numkey).toString()); } fillPaint.setStyle(android.graphics.Paint.Style.FILL); strokePaint.setStyle(android.graphics.Paint.Style.STROKE); strokePaint.setStrokeWidth(2); strokePaint.setColor(Color.BLACK); for (int i =0; i<list.size(); i++){ int col = 100+(155*i/list.size()); fillPaint.setColor(Color.rgb(40, col, col)); startAngle = startAngle+sweepAngle; sweepAngle = 360*Float.valueOf(list.get(i).get(numkey).toString())/total; canvas.drawArc(80, 40, viewWidth-80, viewWidth-120, startAngle, sweepAngle, true, fillPaint); canvas.drawArc(80, 40, viewWidth-80, viewWidth-120, startAngle, sweepAngle, true, strokePaint); lineHeight = lineHeight + 80; canvas.drawRect(40, viewWidth - 120 + lineHeight - 40, 80, viewWidth - 120+ lineHeight, fillPaint); fillPaint.setColor(Color.BLACK); fillPaint.setTextSize(40); canvas.drawText(list.get(i).get(labelkey).toString() + " : " + list.get(i).get(numkey).toString(), 100, viewWidth - 120+ lineHeight, fillPaint); } }Kode ini hanya berfungsi untuk nilai positif. Untuk menggunakan warna acak untuk PieChart, dalam kode di atas ubah kode di bawah ini. int col = 100+(155*i/list.size()); fillPaint.setColor(Color.rgb(40, col, col)); Ke int r = getRandom(0, 255); int g = getRandom(0, 255); int b = getRandom(0, 255);
fillPaint.setColor(Color.rgb(r, g, b)); 16. Simpan dan Jalankan Proyek.
iii. Yang terakhir masukkan sumber add lain secara langsung blok dengan kode berikut.
{
8. Selanjutnya tentukan halaman tampilan More Block (i).
i. Dalam sebuah sumber tambahan, secara langsung blok masukkan kode berikut (Kode ini akan membuka halaman pdf menggunakan PdfRenderer dan menampilkannya di ZoomableImageView):
Di sini (int) _i mewakili variabel angka i di Blok yang lebih banyak.
ii. Gunakan blok untuk menampilkan i +1 di EditText.
9. Dalam event file_pickeronFilesPicked, gunakan blok seperti yang ditunjukkan pada gambar di bawah ini:
i. Set String pdfFile ke path dari file yang dipilih.
ii. Atur halaman variabel angka ke 0. aku aku aku. Gunakan kode coba {} catch (Exception) {} dan tentukan renderer dan atur pageCount ke pageCount yang diperoleh dari renderer. Gunakan kode berikut di blokir sumber tambahan secara langsung:
try {
renderer = new android.graphics.pdf.PdfRenderer(new ParcelFileDescriptor(ParcelFileDescriptor.open(new java.io.File(pdfFile), ParcelFileDescriptor.MODE_READ_ONLY)));
pageCount = renderer.getPageCount();
iv. Display the first page using the More Block display page (page).
v. Setel text pada textview4 ke pageCount.
vi. Catch Exception gunakan kode berikut ini:
} catch (Exception e){ }
10. Pada event textview1 onClick, pindah ke halaman sebelumnya. Gunakan blok seperti yang ditunjukkan pada gambar di bawah:
11. Pada event textview2 onClick, pindah ke halaman berikutnya. Gunakan blok seperti yang ditunjukkan pada gambar di bawah:
12. Pada event textview3 onClick, pindah ke nomor halaman yang dimasukkan di edittext1. Gunakan blok seperti yang ditunjukkan pada gambar di bawah:
13. Simpan and run proyek. Sekarang Anda dapat memilih file PDF dan melihatnya di ZoomableImageView ditambahkan ke linear3.
