Finding the View

On Android, there are many ways to interact with the views created with the XML files. This presentation reviews how things work in the background.

Transcript

1. Finding the view
   
   Hadi Tok
   
   CitizenMe
   
   @hadi_tok
   

   View Slide

2. findViewById(int id)
   

   View Slide

3. View.findViewById(int id)
   /**
   * Finds the first descendant view with the given ID, the view itself if
   * the ID matches getId(), or null if the ID is invalid
   */
   

   View Slide

4. View.findViewById(int id)
   Generally used to access views generated with
   LayoutInflater
   

   View Slide

5. LayoutInflater
   

   View Slide

6. LayoutInflater
   
   /**
   * Instantiates a layout XML file into its corresponding View
   */
   

   View Slide

7. @Override
   public void setContentView(@LayoutRes int layoutResID ) {
   getDelegate().setContentView( layoutResID );
   }
   

   View Slide

8. LayoutInflater.from(mContext).inflate( layoutResID , contentParent);
   

   View Slide

9. final XmlResourceParser parser = res.getLayout( layoutResID );
   

   View Slide

10. final String name = parser .getName();
    

    View Slide

11. clazz = mContext.getClassLoader().loadClass(
    prefix != null ? (prefix + name) : name ).asSubclass(View.class);
    

    View Slide

12. constructor = clazz .getConstructor(mConstructorSignature);
    

    View Slide

13. final View view = constructor .newInstance(args);
    

    View Slide

14. root.addView( view , params);
    

    View Slide

15. findViewById(int id)
    

    View Slide

16. @Override
    public T findViewById(@IdRes int id) {
    return getDelegate().findViewById( id );
    }
    

    View Slide

17. return (T) mWindow.findViewById( id );
    

    View Slide

18. return getDecorView().findViewById( id );
    

    View Slide

19. if ( id == mID) {
    return (T) this;
    }
    

    View Slide

20. for (int i = 0; i < len; i++) {
    View v = mChildren[i];
    v = v.findViewById( id );
    if (v != null) {
    return (T) v;
    }
    }
    return null;
    

    View Slide

21. Data Binding
    

    View Slide

22. Data Binding
    Allows you to bind UI components in your layouts to
    data sources in your app using a declarative format
    rather than programmatically
    

    View Slide

23. Data Binding
    Allows you to bind UI components in your layouts to
    data sources in your app using a declarative format
    rather than programmatically
    

    View Slide

24. Data Binding
    Allows you to bind UI components in your layouts to
    data sources in your app using a declarative format
    rather than programmatically
    

    View Slide

25. 
    xmlns:app="http://schemas.android.com/apk/res-auto">
    
    name="viewModel"
    type="com.example.main.MainViewModel" />
    
    android:layout_height="match_parent"
    android:text="@{ viewModel.text }" />
    
    https://viblo.asia/p/understanding-data-bindings-generated-code-and-how-does-android-data-binding-compiler-work-Ljy5Vd1yZra
    

    View Slide

26. public class MainActivity extends AppCompatActivity {
    @Inject
    MainViewModel viewModel;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ActivityMainBinding bind =
    DataBindingUtil.setContentView(this, R.layout.activity_main);
    bind.setViewModel(viewModel);
    }
    }
    

    View Slide

27. public class MainViewModel extends ViewModel {
    public final ObservableField text = new
    ObservableField<>();
    }
    

    View Slide

28. 
    xmlns:app="http://schemas.android.com/apk/res-auto">
    
    name="viewModel"
    type="com.example.main.MainViewModel" />
    
    android:layout_height="match_parent"
    android:text="@{ viewModel.text }" />
    
    https://viblo.asia/p/understanding-data-bindings-generated-code-and-how-does-android-data-binding-compiler-work-Ljy5Vd1yZra
    

    View Slide

29. android:layout_height="match_parent"
    android:tag="layout/activity_main_0" />
    

    View Slide

30. 
    directory="layout"
    isMerge="false" modulePackage="com.harpacrista">
    
    
    
    
    
    
    
    
    
    
    
    false
    
    
    
    
    
    
    
    

    View Slide

31. public class ActivityMainBinding extends android.databinding.ViewDataBinding
    {
    …
    /**
    * Where the magic happens
    */
    }
    

    View Slide

32. Kotlin Android
    Extensions(Synthetics)
    

    View Slide

33. Kotlin Android Extensions plugin
    Allows us to obtain the same experience we have with
    some of these libraries, without having to add any extra
    code.
    

    View Slide

34. apply plugin: 'kotlin-android-extensions'
    

    View Slide

35. androidExtensions {
    experimental = true
    }
    

    View Slide

36. res/layout/activity_free.xml
    

    View Slide

37. res/layout/activity_free.xml
    import kotlinx.android.synthetic.activity_free.*
    

    View Slide

38. res/layout/activity_free.xml
    import kotlinx.android.synthetic.activity_free.*
    textView.text = “DevFest"
    

    View Slide

39. import kotlinx.android.synthetic.main.activity_splash.*
    class PresentationActivity: BaseActivity() {
    override fun onCreate(savedInstanceState: Bundle?, persistentState:
    PersistableBundle?) {
    super.onCreate(savedInstanceState, persistentState)
    setContentView(R.layout.activity_splash)
    logoIv.visibility = View.VISIBLE
    }
    }
    

    View Slide

40. public void onCreate(@Nullable Bundle savedInstanceState, @Nullable
    PersistableBundle persistentState) {
    super.onCreate(savedInstanceState, persistentState);
    this.setContentView(-1300174);
    ImageView var10000 = (ImageView)this._$_findCachedViewById(id.logoIv);
    Intrinsics.checkExpressionValueIsNotNull(var10000, "logoIv");
    var10000.setVisibility(0);
    }
    

    View Slide

41. private HashMap _$_findViewCache;
    public View _$_findCachedViewById(int var1) {
    if (this._$_findViewCache == null) {
    this._$_findViewCache = new HashMap();
    }
    View var2 = (View)this._$_findViewCache.get(var1);
    if (var2 == null) {
    var2 = this.findViewById(var1);
    this._$_findViewCache.put(var1, var2);
    }
    return var2;
    }
    

    View Slide

42. View Binding
    

    View Slide

43. View Binding
    Is a feature that allows you to more easily write code
    that interacts with views. Once view binding is enabled
    in a module, it generates a binding class for each XML
    layout file present in that module.
    

    View Slide

44. android {
    ...
    viewBinding {
    enabled = true
    }
    }
    

    View Slide

45. 
    
    
    android:background="@drawable/rounded_button" />
    
    

    View Slide

46. private lateinit var binding: ResultProfileBinding
    @Override
    fun onCreate(savedInstanceState: Bundle) {
    super.onCreate(savedInstanceState)
    binding = ResultProfileBinding.inflate(layoutInflater)
    setContentView(binding.root)
    }
    

    View Slide

47. binding.name.text = viewModel.name
    binding.button.setOnClickListener { viewModel.userClicked() }
    

    View Slide

48. Jetpack Compose
    

    View Slide

49. Jetpack Compose
    Android’s modern toolkit for building native UI
    

    View Slide

50. class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
    Greeting("Android")
    }
    }
    }
    @Composable
    fun Greeting(name: String) {
    Text(text = "Hello $name!")
    }
    

    View Slide

51. Questions?
    

    View Slide

52. Hadi Tok, CitizenMe
    
    @hadi_tok
    Thank you!
    

    View Slide